一. 通用的水平居中
margin:0px auto;
二. 子元素宽高固定的 水平垂直居中
1. 方法1:子元素先绝对定位,top和left均为50%(父元素),后margin的top和left负向填补子元素的50%(需要具体PX值).<div class="container"> <div class="box1">子元素1(宽高固定)水平和垂直居中.</div></div>.container{ position: relative;/*子元素为了居中,使用绝对定位,因此父元素要相对定位*/ }.box1{ width: 100px; height: 100px; border: 1px solid green; position: absolute; top: 50%; /*50%是父元素的50%*/ left: 50%; margin-top: -50px; /*由于父元素的50%定位过多,因此需要margin往回调.调节数量为子元素宽高的一半.*/ margin-left: -50px; /*注意,此处不能使用50%,因为%是相对于父元素的50%,而不是子元素*/ }2. 方法2: 子元素先margin,top和left均为50%(父元素),后子元素相对定位,top和left负向填补子元素的50%(需要具体PX值).
<div class="container"> <div class="box2">子元素2(宽高固定)水平和垂直居中.</div></div>.box2{ width: 100px; height: 100px; border: 1px solid green; margin-top: 50%; /*由于父元素的50%定位过多,因此需要margin往回调.调节数量为子元素宽高的一半.*/ margin-left: 50%; /*注意,此处不能使用50%,因为%是相对于父元素的50%,而不是子元素*/ position: relative; top:-50px; left: -50px; }3. 方法3:子元素先绝对定位,top和left均为50%(父元素),后使用transform: translate(-50%,-50%)负向移动子元素的宽高的50%.
<div class="container"> <div class="box3">子元素3(宽高固定)水平和垂直居中.</div></div>
.container{position: relative;/*子元素为了居中,使用绝对定位,因此父元素要相对定位*/ }.box3{ width: 100px; height: 100px; border: 1px solid green; position: absolute; top: 50%; /*50%是父元素的50%*/ left: 50%; transform: translate(-50%,-50%);/*translate中的50%为子元素的50% */ }4. 方法4:父元素设置display:flex布局,且父元素设置justify-content和align-items为center.
<div class="flex-parent"> <div class="box4">子元素4(宽高固定)水平和垂直居中.</div></div>.flex-parent{ width: 200px; height: 200px; border: 1px solid red; display: flex; /*父元素使用flex布局*/ display:-webkit-flex; /*针对webkit的浏览器*/ justify-content: center;/*使子元素水平居中*/ align-items: center; /*使子元素垂直居中*/ } .box4{ border: 1px solid green; width: 100px; height: 100px; }
三. 子元素不定宽高的 水平垂直居中
1. 方法1: 子元素绝对定位+transform: translate(-50%,-50%).
<div class="container"> <div class="box5">子元素5(宽高不定)水平和垂直居中.</div></div>
.container{ position: relative;/*子元素为了居中,使用绝对定位,因此父元素要相对定位*/ }
.box5{ border: 1px solid green; position: absolute; top: 50%; /*50%是父元素的50%*/ left: 50%; transform: translate(-50%,-50%);/*translate中的50%为子元素的50% */ }2. 方法2:父元素设置display:flex布局,且父元素设置justify-content和align-items为center.
<div class="flex-parent"> <div class="box6">子元素6(宽高不定)水平和垂直居中.</div></div>
.flex-parent{ width: 200px; height: 200px; border: 1px solid red; display: flex; /*注意,子元素要使用flex:num 属性*/ display:-webkit-flex; /*针对webkit的浏览器*/ justify-content: center;/*使子元素水平居中*/ align-items: center; /*使子元素垂直居中*/ } .box6{ border: 1px solid green; }
注意:
1. 当使用margin:0px auto后,再写position:absolute; top:50%; 无法达到水平和垂直同时居中的效果。
因为绝对定位后没有写left的值,则默认为left为0.则盒子直接定位到左侧,而不是居中。
因此若使用绝对定位,应水平和垂直均采用绝对定位方法来实现居中。