- A+
所属分类：Web前端
1、水平居中
将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。
代码：
margin:0 auto;
2、文字水平垂直居中
利用line-height设为height的一样
代码：
line-height: 200px;/*垂直居中关键*/
height: 200px;
3、利用padding和background-clip配合实现div的水平垂直居中
通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外div减去内div的差的一半
1 .parent{ 2 margin:0 auto; 3 width:200px; 4 height:200px; 5 background-color:red; 6 } 7 .children { 8 width: 100px; 9 height: 100px; 10 padding: 50px; 11 background-color: black; 12 background-clip:content-box;/*居中的关键*/
4、absolute定位
其中的margin中的值为该div宽度的一半
利用position:absolute搭配top，left 50%，再将margin设为负值也可以对div进行水平垂直居中
1 .parent { 2 position:relative; 3 margin:0 auto; 4 width:200px; 5 height:200px; 6 background-color:red; 7 } 8 .children { 9 position:absolute; 10 left:50%; 11 top:50%; 12 margin:-25px 0 0 -25px ; 13 height:50px; 14 width:50px; 15 background-color: black; 16 }
5、text-align居中
将子div的display设为inline-block。
1 .parent { 2 text-align:center; 3 margin:0 auto; 4 width:200px; 5 height:200px; 6 background:red; 7 } 8 .children { 9 positiona;absolute; 10 margin-top:75px; 11 width:50px; 12 height:50px; 13 background: black; 14 display:inline-block;/*使其父元素text-align生效*/ 15 }
图片居中
1、top
1 position:absolute; 2 right:50%; 3 bottom:50%;
2、transform
不需要定宽度的父div实现图片的水平垂直居中
1 <div class="parent"> 2 3 <div class="children"> 4 5 <div class="children-inline">我是水平垂直居中噢！</div> 6 7 </div> 8 9 </div>
1 .parent { 2 float: left; 3 width: 100%; 4 height: 200px; 5 background-color: red; 6 } 7 .children { 8 float:left; 9 position:relative; 10 top:50%; 11 left:50%; 12 } 13 .children-inline { 14 position: relative; 15 left: -50%; 16 -webkit-transform : translate3d(0, -50%, 0); 17 transform : translate3d(0, -50%, 0); 18 background-color: black; 19 color:white; 20 }
3、flex水平垂直居中
1 <div class="parent"> 2 3 <div class="children">我是通过flex的水平垂直居中噢！</div> 4 5 </div>
1 html,body{ 2 width: 100%; 3 height: 200px; 4 } 5 .parent { 6 display:flex; 7 align-items: center;/*垂直居中*/ 8 justify-content: center;/*水平居中*/ 9 width:100%; 10 height:100%; 11 background-color:red; 12 } 13 .children { 14 background-color:blue; 15 }
1 水平居中 2 .center-vertical { 3 position: relative; 4 top: 50%; 5 transform: translateY(-50%); 6 } 7 8 9 10 垂直居中 11 .center-horizontal { 12 position: relative; 13 left: 50%; 14 transform: translateX(-50%); 15 }
