您的位置：首页 > Web前端 > CSS

CSS水平居中，垂直居中以及各种布局方式

2018-03-19 17:00 639 查看

一、水平居中

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-col
4000
or: 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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 布局 居中
相关文章推荐
新的分享
章节导航