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

haizhilin2013 · 2019-07-17T20:35:48Z

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

huangsw0411 · 2019-07-18T00:18:12Z

我知道的有两种方法

<!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 · 2019-07-18T00:47:50Z

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

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

NicholasBaiYa · 2019-07-18T00:48:40Z

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

shejiJiang · 2019-07-18T01:03:13Z

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

HuoXiaoYe · 2019-07-18T01:27:51Z

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

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

tonyChenHey · 2019-07-18T04:02:31Z

<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 · 2019-07-18T07:06:47Z

<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 · 2019-07-18T07:41:32Z

利用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 · 2019-08-01T09:25:55Z

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

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

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

jiamianmao · 2019-08-13T06:49:30Z

1，flex
2，absolute
3，table

Konata9 · 2019-08-21T02:16:53Z

外层 relative，div 使用 absolute 配合 transform 实现。
外层 relative，div 使用 absolute 设置 left/right/top/bottom 为 0 配合 margin: auto 实现。
flex 实现。
table-cell 实现。

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

seho-dev · 2019-11-14T05:06:57Z

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

MrZ2019 · 2021-06-30T05:56:49Z

利用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%);
}

haizhilin2013 added the css css label Jul 17, 2019

haizhilin2013 mentioned this issue Apr 19, 2020

[css] 第370天写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 #2263

Open

haizhilin2013 mentioned this issue Jul 7, 2020

[css] 第449天写出固定子容器在固定的父容器下水平垂直居中的布局 #2613

Open

haizhilin2013 mentioned this issue Oct 17, 2020

[html] 第551天写出不定宽度的子级div，在相对于固定宽度的父级元素水平居中的布局 #3071

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

haizhilin2013 commented Jul 17, 2019

huangsw0411 commented Jul 18, 2019

KongXiaoYan03 commented Jul 18, 2019

NicholasBaiYa commented Jul 18, 2019

shejiJiang commented Jul 18, 2019

HuoXiaoYe commented Jul 18, 2019

tonyChenHey commented Jul 18, 2019

nowherebutup commented Jul 18, 2019 •

edited

Loading

xxf1996 commented Jul 18, 2019

Vi-jay commented Aug 1, 2019

jiamianmao commented Aug 13, 2019

Konata9 commented Aug 21, 2019

seho-dev commented Nov 14, 2019

MrZ2019 commented Jun 30, 2021

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

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

Comments

haizhilin2013 commented Jul 17, 2019

huangsw0411 commented Jul 18, 2019

KongXiaoYan03 commented Jul 18, 2019

NicholasBaiYa commented Jul 18, 2019

shejiJiang commented Jul 18, 2019

HuoXiaoYe commented Jul 18, 2019

tonyChenHey commented Jul 18, 2019

nowherebutup commented Jul 18, 2019 • edited Loading

xxf1996 commented Jul 18, 2019

Vi-jay commented Aug 1, 2019

jiamianmao commented Aug 13, 2019

Konata9 commented Aug 21, 2019

seho-dev commented Nov 14, 2019

MrZ2019 commented Jun 30, 2021

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

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

nowherebutup commented Jul 18, 2019 •

edited

Loading