2020-08-18

Css的垂直居中
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术： MVC
作者：赖辉
撰写时间：2020/8/17
通用水平、垂直居中方法：
1、flex：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
2、transform + position：
.parent {
position: relative;
}
.child {
position: absolute;left:50%;top: 50%;
transform: translate(-50%, -50%);
}
其他常用居中方法：
1、内联元素水平居中
.parent{
text-align:center;}
2、内联元素垂直居中
.parent{
height:100px;
line-height:100px;}
3、定宽块级元素水平居中
.child{
margin: 0 auto;}

顺便介绍三种布局：
1、浮动布局
通过设置属性 float:left 或 float:right 让元素从左往右流动或从右往左流动，通过设置 margin 属性调整元素的位置，最后清除浮动。
2、绝对定位
给父元素设置 display:relative 给子元素设置 display:absolute 使子元素相对于父元素定位，通过设置 left/right/top/bottom 属性调整元素的位置。
3、flex布局
给父元素（Flex容器）设置 display:flex；子元素（Flex项目）会默认排成一行，通过设置容器或项目的各种属性来改变项目布局的方式。
接下来用代码演示三种布局方式
HTML：

left

mid

right

CSS： div { box-sizing: border-box}.father { height: 300px; width: 600px; border: 1px solid black;}.father>div { border: 1px solid red; width: 150px; height: 150px; text-align: center; line-height: 150px;} 要达到的效果：

1、浮动布局：
.a {
float: left;}.b {
float: left;
margin-left: 75px;}.c {
float: right;}.father::after {
content: ‘’;
display: block;
clear: both;}/* 清除浮动 */
2、绝对定位
.father {
position: relative;}.a {
position: absolute;}.b {
position: absolute;
left: 225px;}.c {
position: absolute;
right: 0;}
3、flex布局
.father{
display: flex;
justify-content:space-between;}

初来乍到，请多多指教，大神勿喷。