水平居中
水平居中的对象分为三类:行内元素,定宽块状元素,不定宽块状元素。
行内元素:如果被设置元素为文本,图片等行内元素时,水平居中是通过给父元素设置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>

定宽块状元素:被设置元素为块状元素,且元素的宽度固定。
<!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>

不定宽块状元素(有三种方法):被设置的元素是块状,但宽度不定。
方法一:加入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>

方法二
改变块级元素的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>

方法三:设置浮动和相对定位来实现
通过给父元素设置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>

水平居中讲解到此完毕,下面开始讲垂直居中
垂直居中
垂直居中的对像分为三种:
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>

第二种:有两种方法。
方法一(兼容性差):为父元素设置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>

方法二:使用插入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>

第三种:
<!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
}
网友评论