水平居中
水平居中的对象分为三类：行内元素，定宽块状元素，不定宽块状元素。
行内元素：如果被设置元素为文本，图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>水平居中</title>
<style>
div{
width: 300px;
background-color: yellow;
text-align: center;
}
</style>
</head>
<body>
<div>
<p>小仙女小王子<br>
小仙女小王子<br>
小仙女小王子<br></p>
</div>
</body>
</html>
QQ截图20180130124420.jpg
定宽块状元素：被设置元素为块状元素，且元素的宽度固定。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>水平居中</title>
<style>
.div1{
width: 80px;
background-color: yellow;
height: 80px;
}
.div2{
height: 40px;
background-color: red;
//下面的两条语句缺一不可。
width: 40px;
margin:auto;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
</body>
</html>
QQ截图20180130135827.jpg
不定宽块状元素（有三种方法）：被设置的元素是块状，但宽度不定。
方法一：加入table标签
第一步：为需要设置居中的元素外面加入一个table标签（包括<tbody><tr><td>）.
第二步：为这个table设置margin:auto属性。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>水平居中</title>
<style>
.div1{
width: 80px;
background-color: yellow;
height: 80px;
}
.div2{
height: 40px;
background-color: red;
}
table{
margin: auto;
}
</style>
</head>
<body>
<div class="div1">
<table><tbody><tr><td>
<div class="div2">3
</div>
</td></tr></tbody></table>
</div>
</body>
</html>
image.png
方法二
改变块级元素的display为inline类型（设置为行内元素显示），然后为其父元素设置text-align:center来实现居中效果。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>水平居中</title>
<style>
.div1{
width: 80px;
background-color: yellow;
height: 80px;
text-align: center;
}
.div2{
height: 40px;
background-color: red;
display: inline;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">3
</div>
</div>
</body>
</html>
image.png
方法三：设置浮动和相对定位来实现
通过给父元素设置float属性,然后给父元素设置position:relative和left:50%,子元素设置position：relative和left:-50%来实现水平居中。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>水平居中</title>
<style>
.div1{
width: 60px;
height: 60px;
background-color: yellow;
}
.div2{
float: left;
position: relative;
left: 50%;
}
.div3{
position: relative;
left: -50%;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">天
</div>
</div>
</div>
</body>
</html>
image.png
水平居中讲解到此完毕，下面开始讲垂直居中
垂直居中
垂直居中的对像分为三种：
1.父元素高度确定的单行文本。
2.父元素高度确定的多行文本以及图片等的竖直居中。
3.让存于div中的图片和文字同时并排垂直居中。
第一种：通过设置父元素的height和line-height高度一致来实现的。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>水平居中</title>
<style>
.div1{
width: 300px;
height: 60px;
line-height: 60px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1">
<p>往往娃地方士大夫打开</p>
</div>
</body>
</html>
image.png
第二种：有两种方法。
方法一（兼容性差）：为父元素设置vertical-align:middle和display:table-cell
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>水平居中</title>
<style>
.div1{
width: 100px;
height: 150px;
background-color: yellow;
vertical-align: middle;
display: table-cell;
}
</style>
</head>
<body>
<div class="div1">
<p>往往娃地方士大夫打开</p>
</div>
</body>
</html>
image.png
方法二：使用插入table(包括<tbody><tr><td>)标签，同时为<td>标签设置vertical-align:middle属性（vertical-align属性也可不设置，因为<td>标签默认vertical-align为middle）。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>水平居中</title>
<style>
.div1{
width: 100px;
}
td{
height:100px;
background:#ccc;
vertical-align: middle;
}
</style>
</head>
<body>
<table><tbody><tr><td>
<div class="div1">
<p>往往娃地方士大夫打开</p>
</div>
</td></tr></tbody></table>
</body>
</html>
image.png
第三种：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度属性</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 0 10px;
}
.line {
font-size: 20px;
border-bottom: 1px solid #dddddd;
}
.line img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 20px;
}
//方法一
.methodOne {
padding: 20px 0;
}
.methodOne span {
line-height: 80px;
vertical-align: top;
}
//方法二
.methodTwo {
display: flex;
height: 120px;
align-items: center;
}
//方法三
.methodThree {
padding: 20px 0;
}
.methodThree * {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="line methodOne">
<img src="./img/logo.png" alt="图片"/>
<span>我是文字</span>
</div>
<div class="line methodTwo">
<img src="./img/logo.png" alt="图片"/>
<span>我是文字</span>
</div>
<div class="line methodThree">
<img src="./img/logo.png" alt="图片"/>
<span>我是文字</span>
</div>
</body>
</html>
水平垂直都居中
1.让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！（这块是抄别人的）
原文链接：https://www.cnblogs.com/hafiz/p/5492409.html
实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。
CSS代码：
.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px
}
网友评论