黑马程序员技术交流社区
标题: Html5-CSS之五大居中方式 [打印本页]
作者: 迷路时往前走 时间: 2019-11-24 20:02
标题: Html5-CSS之五大居中方式
本帖最后由 迷路时往前走 于 2019-11-24 20:04 编辑
通过这半个月的学习，总结了以下五种h5-css布局方式，下面的居中示例中，统一使用了同一个div作为父元素和p作为子元素
设置一个div,并且设置了div的宽高边框，div里面设置一个块元素p，设置了它的宽高和背景色
css居中方式1[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中1</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 300px;
border: 2px solid #000;
margin: 200px auto;
text-align: center;
font-size: 0;
}
div p {
width:100px;
height: 100px;
background: #666;
display: inline-block;
vertical-align: middle;
}
div:after {
content:"";
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
这里利用了伪元素让子元素p在div盒子里左右水平居中只需要在它的父元素div里加text-align:center;垂直方向居中需要在父元素后面加了一个伪元素，并使得样式为inline-block;height:100%;就是和父元素一样高，vertical-align:middle;垂直居中，也就是p元素相对与伪元素居中，由于伪元素和div一样高，所以相当于p元素在div里垂直居中。
css居中方式2
[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中2</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 300px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
}
p {
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
margin: auto;
width: 100px;
height: 100px;
background: #f99;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
这里利用了定位居中
子元素p设置position：absolute脱离文档流,默认以html作为父元素，所以我们给父元素div设置position:relative;使得p以div为父元素做位置的变动，left:0;tight:0;top:0;bottom:0;（只有设置了定位的元素才可以使用这种方式来移动），最后margin:auto;就会水平和垂直都居中。
css居中方式3
[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中3</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
}
p {
width: 100px;
height: 100px;
background: #f99;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
这里利用了弹性盒居中
父元素div设置成弹性盒样式，justify-content:center;主轴居中
align-items:center;垂直居中（而且这两个只能设置在父元素上，弹性盒知识）
css居中方式4[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中4</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 300px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
}
p {
width: 100px;
height: 100px;
background: #f99;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
利用定位线左上角居中，然后左移子元素宽度的一半，再上移子元素高度的一半。
css居中方式5[HTML] 纯文本查看 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>五大居中5</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 300px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
}
p {
position: absolute;
width: 100px;
height: 100px;
background: #f99;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
利用动画移动属性transform
结语相信看了上面的有关Html5、css的元素五大居中方式，你们就可以解决自己的小问题了，但是也要养成一个总结的好习惯。好记性不如烂笔头！以前留下来的话语总是有他的道理。Come on！
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |