一、文本居中
水平居中：text-align: center;
單行文本垂直居中
line-height: xxxpx;（父盒子行高 = 父盒子高度）
多行文本垂直居中
- 方法1搂鲫，利用彈性布局flex+align-items
.box {
display: flex;
align-items: center;
width: 500px;
height: 500px;
background-color: yellow;
}
方法2市咆，父line-height+子行內(nèi)塊+子line-height自定義設(shè)置
先對(duì)父元素設(shè)置高度和行高（相等）稻薇，將子元素設(shè)置為行內(nèi)塊元素轴合，模擬成單行文本伊脓，再對(duì)子元素設(shè)置vertical-align: middle;使其基線對(duì)齊晓殊，這時(shí)還未實(shí)現(xiàn)垂直居中断凶，為子元素自定義line-height屬性的值，覆蓋繼承自父元素的行高巫俺，即可實(shí)現(xiàn)垂直居中认烁。
.box {
width: 500px;
height: 500px;
line-height: 500px;
background-color: yellow;
}
span {
display: inline-block;
vertical-align: middle;
line-height: 18px;
}
方法3，子元素設(shè)為行內(nèi)塊元素+利用相對(duì)定位進(jìn)行平移（translateY）
.text {
width: 500px;
height: 500px;
background-color: yellow;
}
span {
display: inline-block;
position: relative;
top: 50%;
transform: translateY(-50%);
}
方法4介汹，利用表格元素table+vertical-align實(shí)現(xiàn)
.text {
display: table;
width: 500px;
height: 500px;
background-color: yellow;
}
span {
display: table-cell;
vertical-align: middle;
}
二却嗡、圖片居中
方法1：
水平居中，給父元素設(shè) text-align: center嘹承；
垂直居中窗价，給父元素設(shè) line-height: xxxpx 的同時(shí)給圖片設(shè) vertical-align: middle;方法2：
給父元素設(shè) background: url(./upload/floor-1-1.png) no-repeat center center;
三、圖片和文本對(duì)齊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/base.css">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.reg_form {
width: 600px;
height: 400px;
/* background-color: pink; */
border: 1px solid #ccc;
margin: 50px auto 0;
}
.reg_form ul li {
border: 1px solid #ccc;
}
.reg_form ul li label {
display: inline-block;
width: 88px;
text-align: right;
}
.reg_form ul li input {
width: 242px;
height: 37px;
border: 1px solid #ccc;
}
.error {
color: #c81523;
}
.error_icon {
display: inline-block;
width: 20px;
height: 20px;
background: url(./images/error.png) no-repeat;
vertical-align: middle;
}
.str{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="reg_form">
<ul>
<li>
<label for="">手機(jī)號(hào)：</label>
<input type="text">
<span class="error"><i class="error_icon"></i> <strong class="str">手機(jī)號(hào)碼格式不正確叹卷，請(qǐng)重新輸入</strong></span>
</li>
</ul>
</div>
</body>
</html>
預(yù)覽.jpg
