• 前端页面布局
• 一、水平居中
  • 1.1 行内元素水平居中
  • 1.2 块级元素水平居中
    • 1.2.1 定宽块
    • 1.2.2 不定宽块
• 二、垂直居中
  • 2.1 单行文本垂直居中
  • 2.2 块级元素垂直居中
• 三、水平垂直居中

前端页面布局

一、水平居中

1.1 行内元素水平居中

这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align: center即可实现。

.center {
    text-align:center;
}

1.2 块级元素水平居中

1.2.1 定宽块

只需给需要居中的块级元素加margin:0 auto即可，但需要注意的是，块状元素的宽度width值一定要有

.center{
	width:200px;
	margin:0 auto;
}

1.2.2 不定宽块

把要处理的块状元素的父元素设置display:flex,justify-content:center;

.center {
    display: flex;
    justify-content: center;
}
<div class="center">
    <div class="flex-div">1</div>
    <div class="flex-div">2</div>
</div>

二、垂直居中

2.1 单行文本垂直居中

• 设置paddingtop=paddingbottom；或
• 设置line-height=height；

2.2 块级元素垂直居中

在需要垂直居中的父元素上，设置display:flex和align-items：center

.box {
    height:600px;  
    display:flex;
    align-items:center; 
}

三、水平垂直居中

.box {
    height:600px;
    
    display:flex;
    justify-content:center;  //子元素水平居中
    align-items:center;      //子元素垂直居中
}