水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）
*/
#div1 {
text-align: center;
width: 300px;
height: 100px;
background-color: brown;
}
#div2 {
margin: 0 auto;
width: 100px;
height: 100px;
background-color: brown;
}
#div3 {
text-align: center;
}
#div3 div {
display: inline-block;
width: 100px;
height: 100px;
background-color: brown;
}
#div4 {
width: 200px;
height: 200px;
background-color: brown;
}
#div4 span {
line-height: 200px;
}
#div5 {
width: 200px;
background-color: brown;
}
#div5 span {
height: 200px;
line-height: 200px;
}
#div6 {
height:700px;
width:700px;
background: rgb(1, 244, 68);
display: table-cell;
vertical-align: middle;
}
#div7 {
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%); */
margin-left: -200px;
margin-top: -200px;
height: 400px;
width: 400px;
background-color: brown;
}
</style>
</head>
<body>
<div id="div1">
<span>行内元素水平居中</span>
</div>
<div id="div2">一个块状元素水平居中</div>
<div id="div3">
<div>多个块状元素水平居中</div>
<div>多个块状元素水平居中</div>
<div>多个块状元素水平居中</div>
<div>多个块状元素水平居中</div>
</div>
<div id="div4">
<span>单行的行内元素垂直居中1</span>
</div>
<div id="div5">
<span>单行的行内元素垂直居中2</span>
</div>
<div id="div6">
<span>多行的行内元素垂直居中</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex facere repellendus, porro velit, modi culpa, tempora totam dolore quaerat natus vel fugiat non voluptas unde quod fuga, iusto cumque rem.</span>
<span>Beatae natus obcaecati error fugiat harum consequatur possimus modi tempore aut tenetur nostrum illo maxime consequuntur, nulla, blanditiis alias voluptas voluptates neque minus accusamus cumque rem inventore. Eligendi, tempora, impedit.</span>
<span>Optio delectus, aliquid pariatur fugit eveniet accusantium eius et veritatis blanditiis temporibus, sed reiciendis sunt quae quam obcaecati labore quia sit debitis recusandae alias rerum! Libero adipisci sed velit facere.</span>
<span>Laudantium, adipisci in nulla atque aut similique voluptatum maxime corrupti nobis, consequatur impedit ipsa reprehenderit voluptates quo, inventore tempora tenetur quibusdam deserunt! Animi impedit, earum dolore. Inventore sequi nemo saepe.</span>
<span>Eligendi, porro voluptas molestiae, corrupti atque ad dolor cupiditate tempore adipisci similique. Dolorum voluptates id nam, non ipsum optio, incidunt culpa quia fuga vitae qui suscipit consectetur ipsa nesciunt aut.</span>
</div>
<div id="div7">
已知宽高元素水平垂直居中
</div>
</body>
</html>
