CSS中的居中
程序员文章站
2022-06-11 20:44:02
...
一、水平居中
文字水平居中
单行文字水平居中，对于含有inline-*的元素都可以用下面的方法实现水平居中。
语法： text-ailgn：center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中常用技巧</title>
<style>
.box1{
height: 400px;
width: 800px;
border: 1px solid red;
/*text-align: center;*/
}
</style>
</head>
<body>
<div class="box1">
昨夜星辰昨夜风，画楼西畔桂堂东
</div>
</body>
</html>
块元素水平居中
语法
margin：0 auto；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中常用技巧</title>
<style>
.box1{
height: 400px;
width: 800px;
border: 1px solid red;
}
.box2{
height: 40px;
width: 40px;
border: 1px solid red;
background-color: yellow;
/*margin: 0 auto;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
二、垂直居中
文字的垂直居中
1.单行文字
line-height：“height的值”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中常用技巧</title>
<style>
.box1{
height: 400px;
width: 800px;
border: 1px solid red;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<div class="box1">
昨夜星辰昨夜风，画楼西畔桂堂东
</div>
</body>
</html>
多行文字的水平居中
行内块元素也用这种方法居中
父元素{
display：table-cell
vertical-align：middle
}
子元素{
display：inline-block
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中常用技巧</title>
<style>
.box1{
height: 400px;
width: 800px;
border: 1px solid red;
text-align: center;
display: table-cell;
vertical-align: middle;
}
span{
display: inline-block;
}
</style>
</head>
<body>
<div class="box1">
<span>
昨夜星辰昨夜风，画楼西畔桂堂东。
身无彩凤双飞翼，心有灵犀一点通。
隔座送钩春酒暖，分曹射覆蜡灯红。
嗟余听鼓应官去，走马兰台类转蓬。
昨夜星光灿烂，夜半却有习习凉风；我们酒筵设在画楼西畔、桂堂之东。身上无彩凤的双翼，不能比翼齐飞；内心却象灵犀一样，感情息息相通。互相猜钩嬉戏，隔座对饮春酒暖心；分组来行酒令，决一胜负烛光泛红。可叹呵，听到五更鼓应该上朝点卯；策马赶到兰台，像随风飘转的蓬蒿。
</span>
</div>
</body>
</html>
块元素的垂直居中
position：absolute；
top：50%；
left：50%；
margin-top：“负的height值的一半”；
margin-left：“负的width值的一半”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS中常用技巧</title>
<style>
.box1{
height: 400px;
width: 800px;
border: 1px solid red;
}
.box2{
height: 40px;
width: 40px;
border: 1px solid red;
background-color: yellow;
/*margin: 0 auto;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
上一篇： 一个简单且很好用的php分页类_PHP
下一篇： 搞笑的请假条等小幽默五则.