水平居中
1.父元素固定宽高,子元素设置margin: 0 auto;
2.在子元素中将display设置为inline-block,父元素text-algin设置为center;
垂直居中
1.用flex布局实现垂直居中,主要代码:
html代码:
css代码:
2.用绝对定位实现垂直居中,主要代码:
html代码:
css代码:
水平垂直居中
1.绝对定位,确认宽高设置margin属性为宽高的负一半
代码:
width: 200px; height: 100px;
background-color: crimson;
position: absolute; left: 50%; top: 50%;
margin-left: -100px; margin-top: -50px;
2.绝对定位:不确定宽高,使用transform: translate属性
代码:
width: 200px; height: 100px;
background-color: crimson;
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
3.绝对定位,设置left right top bottom属性值设置为0;margin设置成默认auto
代码:
width: 200px; height: 100px;
background-color: crimson;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto;
4.在父层设置flex布局属性(高度根据自己需求设定)
代码:
父层:width: 100%; height: 200px;
display: flex; justify-content: center; align-items: center;
子层:
width: 200px; height: 100px; background-color: crimson;