水平居中布局
方法一:使用样式text-align: center;flex
方法二:使用样式margin: 0 auto;code
方法三:使用display: flex布局;orm
方法四:使用绝对定位的方式blog
.parent{
position: relative;
.child{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
}
垂直居中:it
方法一:使用样式vertical-align: middle(须要是行内元素,每每伴随着display: inline-block; 同时每每须要对于存在多个子元素时生效,因此当只存在一个元素而又须要用这种方式实现效果时,每每须要使用伪元素:before :after);io
方法二:使用display:flex布局;table
方法三:使用绝对定位的方式form
.parent{
position: relative;
.child{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
水平垂直居中,除了以上几种方式的结合以外,还能够经过如下几种方法实现:class
方法一:使用display:table;display:table-cell;
方法二:使用display:flex布局
.box {
display: flex;
justify-content: center;
align-items: center;
}
平常笔记