css 各种居中方法
程序员文章站
2022-03-03 08:00:17
...
css 各种居中方法
1 水平居中
1.1 常规流 inline 元素的居中
- 直接在父元素添加text-align: center；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
text-align: center;
}
</style>
</head>
<body>
<span class=".content">
盒子
</span>
</body>
</html>
1.2 常规流 block元素的居中
- 为元素设置宽度
- 设置左右 margin 为 auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="content">
盒子
</div>
</body>
</html>
1.3 浮动元素的居中-通过relative
- 设置元素宽度
- position: relative
- 浮动方向偏移量（left 或者 right）设置为 50%
- 浮动方向上的 margin 设置为元素宽度一半乘以-1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
background-color: red;
width: 100px;
height: 100px;
position: relative;
left: 50%;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="content">
盒子
</div>
</body>
</html>
1.4 绝对定位的居中1
- 元素设置宽度
- 偏移量设置为 50%
- 偏移方向外边距设置为元素宽度一半乘以-1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
position: relative;
}
.content{
width: 300px;
height: 300px;
background-color: red;
position:absolute;
left: 50%;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="content">
盒子
</div>
</body>
</html>
1.5 绝对定位的居中2
- 为元素设置宽度
- 设置左右偏移量都为
- 设置左右外边距都为 auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
position: relative;
}
.content{
width: 300px;
height: 300px;
background-color: red;
position:absolute;
left:0;
right:0;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="content">
盒子
</div>
</body>
</html>
2 垂直居中
2.1 绝对地位居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
.content>div{
width: 10px;
height: 10px;
background-color: #800080;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="content">
<div >
</div>
</div>
</body>
</html>
2.2 line-height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
width: 100px;
height: 100px;
background-color: red;
line-height: 100px;
}
</style>
</head>
<body>
<div class="content">
123456
</div>
</body>
</html>
2.3 设置 margin/padding 居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content {
width: 100px;
height: 100px;
background-color: red;
}
.content>div{
padding-top: 45px;
}
</style>
</head>
<body>
<div class="content">
<div>123</div>
</div>
</body>
</html>
2.4 flex 居中 设置 align-items:center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.content{
width: 100px;
height: 100px;
background-color: red;
display: flex;
align-items: center;
}
.content>div{
width: 10px;
height: 10px;
background-color: #800080;
}
</style>
</head>
<body>
<div class="content">
<div >
</div>
</div>
</body>
</html>
上一篇： 51nod 1617 奇偶数组 分治
下一篇： pandas基本操作 持续补充
推荐阅读
-
php 各种应用乱码问题的解决方法_PHP
-
css垂直居中的几种方式_html/css_WEB-ITnose
-
IE8.0下DIV+CSS网站不居中解决办法_html/css_WEB-ITnose
-
负margin居中_html/css_WEB-ITnose
-
Word怎么删除空白页在尝试各种方法后依然删除不了的可行方法
-
CSS实现两列布局的N种方法
-
div中有一个marquee标签，marquee中有滚动显示的文字，如何让文字在div中垂直居中从右向左滚动显示？_html/css_WEB-ITnose
-
css5种实现垂直居中_html/css_WEB-ITnose
-
php 预定义变量各种方法总结_PHP教程
-
各种设备的CSS3MediaQuery整理及爽歪歪写法_html/css_WEB-ITnose