CSS水平居中，垂直居中以及各种布局方式
程序员文章站
2022-04-24 22:30:29
...
一、水平居中
1. 普通div
- 宽度已知
<style type="text/css">
.child{
width: 500px;
height: 100px;
background-color: red;
margin: 0 auto; /* 将左右外边距同时设为auto */
}
</style>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>- 宽度未知
<style type="text/css">
.parent{
text-align: center; /* 父级设置内容居中 */
}
.child{
display: inline-block; /* 把div设置为内联块 */
background-color: red;
}
.content{ // child宽度根据content的宽度变化而变化
width: 300px;
height: 100px;
}
</style>
<body>
<div class="parent">
<div class="child">
<div class="content"></div>
</div>
</div>
</body>2. 浮动div
- 宽度已知
<style type="text/css">
.parent{
overflow: hidden;
}
.child{
float: left;
width: 300px;
height: 100px;
background-color: red;
position: relative; /* 相对定位是相对于元素本身的位置 */
left: 50%;
margin-left: -150px;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>- 宽度未知
<style type="text/css">
.parent{
overflow: hidden;
}
.child{
float: left;
position: relative;
left: 50%;
}
.content{
position: relative; /* 充分利用了相对定位的特点 */
right: 50%;
background-color: red;
}
</style>
<body>
<div class="parent">
<div class="child"> <!-- 居中的是浮动元素的内容，而浮动元素本身并未居中 -->
<div class="content">
这里内容不固定，宽度随内容变化
</div>
</div>
</div>
</body>3. 绝对定位div
- 宽度已知
<style type="text/css">
.parent{
position: relative;
}
.child{
position: absolute;
width: 300px;
height: 100px;
left: 50%;
margin-left: -150px;
background-color: red;
}
</style>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>- 宽度未知
<style type="text/css">
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
}
.content{
position: relative;
right: 50%;
background-color: red;
}
</style>
<body>
<div class="parent">
<div class="child">
<div class="content">
这里内容不固定，宽度随内容变化
</div>
</div>
</div>
</body如何让div宽度占屏幕的百分比，随屏幕的宽度变化而变化，且水平居中
<style type="text/css">
.parent{
position: relative;
}
.child{
width: 50%;
position: absolute;
left: 50%;
}
.content{
width: 100%;
height: 100px;
position: relative;
right: 50%;
background-color: red;
}
</style>
<body>
<div class="parent">
<div class="child">
<div class="content">
</div>
</div>
</div>
</body>二、 垂直居中
<!-- 方法一 -->
<style type="text/css">
.parent{
height: 500px;
display: table-cell;
vertical-align: middle;
}
.child{
background-color: red;
}
</style>
<body>
<div class="parent">
<div class="child">
这里内容不固定，宽度随内容变化
</div>
</div>
</body>
<!-- 方法二 -->
<style type="text/css">
.child{
position: absolute;
top: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
background-color: red;
}
</style>
<body>
<div class="child"></div>
</body>
<!-- 方法三 -->
<style type="text/css">
.child{
position: absolute;
width: 50%;
top: 0;
bottom: 0;
margin: auto;
background-color: red;
}
</style>
<body>
<div class="child"></div>
</body>
<!-- 方法四 -->
<style type="text/css">
html,body{
height: 100%;
padding: 0;
margin: 0;
}
#floater {
float: left;
height: 50%;
margin-bottom: -120px;
}
#content {
clear: both;
width: 200px;
height: 240px;
background: red;
}
</style>
<body>
<div id="floater"></div>
<div id="content">Content here</div>
</body>如何实现左侧导航固定宽度，右侧内容自适应剩余屏幕宽度
<!-- 方法一 -->
<style type="text/css">
.left{
float: left;
width: 200px;
height: 400px;
background-color: red;
}
.right{
height: 500px;
margin-left: 200px;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<!-- 方法二 -->
<style type="text/css">
.container{
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 400px;
background-color: red;
}
.right{
height: 500px;
margin-left: 200px;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
<!-- 方法三 该方法左右两边高度永远一致，以高度较高的为准 -->
<style type="text/css">
.container{
display: table;
width: 100%;
}
.left{
display: table-cell;
width: 200px;
background-color: red;
}
.right{
display: table-cell;
height: 500px;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>如何实现顶部高度固定，下面内容高度自适应剩余屏幕高度
<!-- 方法一 -->
<style type="text/css">
html,body{
height: 100%;
padding: 0;
margin: 0;
}
.header{
height: 100px;
background-color: red;
}
.main{
position: absolute;
width: 100%;
top: 100px;
bottom: 0;
background-color: green;
}
</style>
<body>
<div class="header"></div>
<div class="main"></div>
</body>
<!-- 方法二 该方法下部内容需要设置margin-top值，不然会被头部挡住 -->
<style type="text/css">
html,body{
height: 100%;
padding: 0;
margin: 0;
}
.header{
float: left;
width: 100%;
height: 100px;
background-color: red;
}
.main{
height: 100%;
background-color: green;
}
.main:before{
content: '';
display: table;
}
.content{
margin-top: 100px;
height: 120px;
background-color: orange;
}
</style>
<body>
<div class="header"></div>
<div class="main">
<div class="content"></div>
</div>
</body>如何实现底部固定在屏幕底部，若内容溢出，则底部就跟在内容后面
<style type="text/css">
html{
height: 100%;
}
body{
position: relative;
min-height: 100%;
padding: 0;
margin: 0;
}
.header{
height: 100px;
background-color: red;
}
.main{
padding-bottom: 100px;
background-color: orange;
}
.bottom{
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
background-color: green;
}
</style>
<body>
<div class="header"></div>
<div class="main"></div>
<div class="bottom"></div>
</body>上一篇： MySQL去除重叠时间求时间差和的实现