CSS 居中和垂直水平居中(7)
ZGuangJu 9/23/2018 前端基础CSSCSS3
# 行内元素
# 水平居中
- 水平居中，父元素的宽是默认100%的
<style>
.parent {
background: red;
text-align: center;
}
</style>
···
<body>
<div class="parent">
<span class="child">content</span>
</div>
</body>
- 和
1不同的是，父元素是行元素，但是宽是适应内容的，两侧被margin挤压。
<style>
.parent {
background: red;
width: fit-content;
margin: auto;
}
</style>
···
<body>
<div class="parent">
<span class="child">content</span>
</div>
</body>
# 垂直居中
- 单行文本垂直居中,多行文本不生效
<style>
.parent {
height: 200px;
line-height: 200px;
background: red;
}
</style>
···
<body>
<div class="parent">
<span class="child">content</span>
</div>
</body>
# 块级元素
# 水平居中
- 块级元素水平居中
<style>
.parent {
background-color: red;
}
.child {
margin: 0 auto;
width: 100px;
height: 50px;
background-color: yellowgreen;
}
</style>
···
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
# 垂直居中
- 使用定位,子元素宽度100%，如果不设置，默认内容宽度
<style>
.parent {
background-color: red;
height: 300px;
position: relative;
}
.child {
position: absolute;
top: 50%;
margin-top: -50px;
height: 100px;
width: 100%;
background-color: yellowgreen;
}
</style>
···
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
- 使用
flex，子元素宽度100%,如果不设置，默认内容宽度
<head>
<style>
.parent {
background-color: red;
height: 300px;
display: flex;
align-items: center;
}
.child {
height: 100px;
width: 100%;
background-color: yellowgreen;
}
</style>
···
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
# 水平垂直居中
- 定位 +
margin-top margin-left
要提前知道子元素的宽高
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
background-color: yellowgreen;
}
</style>
···
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
或者
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
position: absolute;
width: 100px;
height: 100px;
top: calc(50% - 50px);
left: calc(50% - 50px);
background-color: yellowgreen;
}
</style>
···
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
- 定位 +
transform
不用提前知道子元素的宽高
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: yellowgreen;
}
</style>
···
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
- 定位 +
margin
设置子元素的margin 0 子元素会填充父元素的所有可用空间,然后margin:auto
<style>
.parent {
position: relative;
height: 200px;
background-color: red;
}
.child {
position: absolute;
width: 100px;
height: 100px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: yellowgreen;
}
</style>
···
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
padding
注意：父元素padding会影响元素大小
<style>
.parent {
padding: 50px;
background-color: red;
}
.child {
height: 200px;
background-color: yellowgreen;
}
</style>
···
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
flex
<style>
.parent {
height: 200px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 100px;
height: 100px;
background-color: yellowgreen;
}
</style>
···
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
- 伪元素
<style>
.parent {
height: 200px;
background-color: red;
text-align: center;
}
.child {
display: inline-block;
width: 100px;
height: 100px;
vertical-align: middle;
background-color: yellowgreen;
}
.parent::before {
display: inline-block;
width: 20px; /*width最后设置为0*/
height: 200px;
vertical-align: middle;
background-color: yellow;
content: "";
}
</style>
···
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>
calc(宽高相等)
<style>
.parent {
height: 600px;
width: 600px;
background-color: red;
}
.child {
width: 100px;
height: 100px;
padding: calc(
(100% - 100px) / 2
); /* 100%是父元素的宽高 ，100px是子元素的宽高，然后除以2 */
background-clip: content-box; /* 让背景颜色只对content生效，不对padding生效 */
background-color: yellowgreen;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">content</div>
</div>
</body>