Skip to content

[css] 第93天 写出div在不固定高度的情况下水平垂直居中的方法？ #907

New issue
New issue
Open
Open
[css] 第93天 写出div在不固定高度的情况下水平垂直居中的方法？#907
Labels
csscss
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Jul 17, 2019

第93天 写出div在不固定高度的情况下水平垂直居中的方法？

Activity

haizhilin2013
added
csscss
on Jul 17, 2019
huangsw0411

huangsw0411 commented on Jul 18, 2019

@huangsw0411
huangsw0411
on Jul 18, 2019

我知道的有两种方法

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <style>
  * {
    padding: 0;
    margin: 0;
  }
  /* flex居中 */
  .tith1 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: red;
  }

  /* table居中 */
  .tith2 {
   text-align: center;
   width: 100%;
   display: table;
   background: blue;
  }
  .tith2 > span {
    display: table-cell;
    vertical-align: middle;
  }
 </style>
 <body>
  <p class="tith1">
    <span>123</span>
  </p>
  <p class="tith2">
    <span>123</span>
  </p>
 </body>
</html>
KongXiaoYan03

KongXiaoYan03 commented on Jul 18, 2019

@KongXiaoYan03
KongXiaoYan03
on Jul 18, 2019

父盒子相对定位
子盒子绝对定位:
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

父盒子相对定位，子盒子绝对定位和margin
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

NicholasBaiYa

NicholasBaiYa commented on Jul 18, 2019

@NicholasBaiYa
NicholasBaiYa
on Jul 18, 2019

自从用了弹性布局，我的居中对齐只有弹性布局。
<style>.box{css: display:flex;flex-flow: row nowarp;justify-content: center; align-items: center;}</style>
<div class="box"><div></div></div>

shejiJiang

shejiJiang commented on Jul 18, 2019

@shejiJiang
shejiJiang
on Jul 18, 2019

不知道以后flex布局普及后，老的布局方式还有多大的用武之地

HuoXiaoYe

HuoXiaoYe commented on Jul 18, 2019

@HuoXiaoYe
HuoXiaoYe
on Jul 18, 2019

大家都很棒 我这里有一种新的方法

.child{
				width: 100px;
				height: 100px;
				background-color: #f60;
				position: relative;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
tonyChenHey

tonyChenHey commented on Jul 18, 2019

@tonyChenHey
tonyChenHey
on Jul 18, 2019
<div class="box">
	<div>一小块</div>
</div>

	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 500px;
			height: 500px;
			background-color: #11b0ff;
		}
		/* flex */
		.box{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		/* 行内块属性 */
		/* .box{
			text-align: center;
		}
		.box::after{
			content: '';
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}
		.box div{
			vertical-align: middle;
			display: inline-block;
		} */
		/* 表格 */
		/* .box{
			display: table;
			text-align: center;
		}
		.box div{
			display: table-cell;
			vertical-align: middle;
		}  */
		/* 定位 */
		/* 可以达到效果,但是无法撑满.box */
		/* .box{
			position: relative;
		}
		.box div{
			position:absolute;
			left:50%;
			top:50%;
			transform:translate(-50%,-50%);
		} */
	</style>
nowherebutup

nowherebutup commented on Jul 18, 2019

@nowherebutup
nowherebutup
on Jul 18, 2019 · edited by nowherebutup
<template>
  <div class="father">
    <div class="son">
      11111111111 <br>
      11111111111 <br>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
/* 第一种 flex */
.father {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.son {
  width: 100px;
  background-color: #ccc;
}
/* 第二种 transform+absolute */
.father {
  height: 100vh;
  position: relative;
}

.son {
  width: 100px;
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
xxf1996

xxf1996 commented on Jul 18, 2019

@xxf1996
xxf1996
on Jul 18, 2019
  1. 利用flex布局：
.father{
    display: flex;
    justify-content: center;
    align-items: center;
}

2: 利用transform属性进行位移：

.father{
    position: relative;
}
.children{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
Vi-jay

Vi-jay commented on Aug 1, 2019

@Vi-jay
Vi-jay
on Aug 1, 2019

父盒子相对定位
子盒子绝对定位:
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

父盒子相对定位，子盒子绝对定位和margin
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;

第二种子元素需要有固定高宽

jiamianmao

jiamianmao commented on Aug 13, 2019

@jiamianmao
jiamianmao
on Aug 13, 2019

1，flex
2，absolute
3，table

Konata9

Konata9 commented on Aug 21, 2019

@Konata9
Konata9
on Aug 21, 2019
  1. 外层 relative，div 使用 absolute 配合 transform 实现。
  2. 外层 relative，div 使用 absolute 设置 left/right/top/bottom 为 0 配合 margin: auto 实现。
  3. flex 实现。
  4. table-cell 实现。

CodePen 地址：https://codepen.io/Konata9/pen/OJLbMyv?editors=1100

seho-dev

seho-dev commented on Nov 14, 2019

@seho-dev
seho-dev
on Nov 14, 2019

万能定位：position各个坐标全部为0，margin: 0 auto

haizhilin2013
mentioned this on Apr 19, 2020
haizhilin2013
mentioned this on Jul 7, 2020
haizhilin2013
mentioned this on Oct 17, 2020
smile-2008

smile-2008 commented on Jun 30, 2021

@smile-2008
smile-2008
on Jun 30, 2021
  1. 利用flex布局：
.father{
    display: flex;
    justify-content: center;
    align-items: center;
}

2: 利用transform属性进行位移：

.father{
    position: relative;
}
.children{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    csscss

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @shejiJiang@smile-2008@haizhilin2013@Konata9@xxf1996

        Issue actions
          [css] 第93天 写出div在不固定高度的情况下水平垂直居中的方法？ · Issue #907 · haizlin/fe-interview