1.CSS布局
实现一个两栏布局，右侧固定宽度200px，左侧自适应宽度
浮动元素 + 普通元素margin
<style>
.layout::after{
content: "";
clear: both;
display: block;
}
.aside{
float: left;
width: 200px;
height: 400px;
background-color: #f00;
}
.main{
background-color: #00f;
margin-left: 210px;
height: 600px;
}
</style>
<body>
<div class="layout">
<div class="aside"></div>
<div class="main"></div>
</div>
</body>
实现一个三栏布局，两侧固定宽度200px，中间宽度自适应撑满
两侧两列固定宽度，中间列自适应宽度
<style>
.layout::after{
content: "";
clear: both;
display: block;
}
.aside1{
float: left;
width: 200px;
height: 400px;
background-color: #f00;
}
.aside2{
float: right;
width: 200px;
height: 400px;
background-color: #00f;
}
.main{
background-color: pink;
margin-left: 210px;
margin-right: 210px;
height: 600px;
}
</style>
<body>
<div class="layout">
<div class="aside1"></div>
<div class="aside2"></div>
<div class="main"></div>
</div>
</body>
2.居中
水平居中
1.text-align
在父元素上设置 text-align: center 使文字/图片水平居中。
2.margin
.container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
块级元素固定宽度，水平居中
<style>
.layout{
background-color: grey;
height: 600px;
}
.content{
width: 300px;
height: 200px;
margin: 0 auto;
background-color: #f00;
}
</style>
</head>
<body>
<div class="layout">
<div class="content">main</div>
</div>
垂直居中
1.pading
2.绝对定位实现居中
3.vertical-align实现居中
4.table-cell实现居中
大段文字在容器内水平垂直居中
<style>
.layout{
background-color: grey;
text-align: center;
padding: 40px 0;
}
</style>
</head>
<body>
<div class="layout">
<h3 >这是标题</h3>
<p >这是内容这是内容这是内容这是内容这是内容</p>
</div>
</body>
要求：图片在容器内水平垂直居中，容器宽高大于图片宽高
方法一：table-cell实现居中
<style>
.container
{
border: 1px solid red;
width: 600px;
height: 600px;
text-align: center;
display: table-cell;
vertical-align: middle;
/*margin: 0 auto;*/
}
</style>
</head>
<body>
<div class="container">
<img src="http://ww1.sinaimg.cn/large/006JM2pKgy1fp6w57wxw6j305k05kt8l.jpg" alt=""/>
</div>
方法二：vertical-align实现居中
<style>
.container
{
border: 1px solid red;
width: 600px;
height: 600px;
text-align: center;
vertical-align: middle;
margin: 0 auto;
}
.container::before{
content:"";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.container>img{
vertical-align: middle;
}
</style>
方法三：绝对定位实现居中
<style>
.container
{
border: 1px solid red;
width: 600px;
height: 600px;
position: relative;
margin: 0 auto;
}
.container>img{
position: absolute;
left: 50%;
top: 50%;
/* transform: translate(-50%,-50%); */
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
}
</style>
固定宽高的块在浏览器窗口水平垂直居中
.container
{
border: 1px solid red;
position: fixed;
background-color: #000;
left: 50%;
top: 50%;
/* transform: translate(-50%,-50%); */
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
}
要求： 不定宽高的块在浏览器窗口水平垂直居中
<style>
.container
{
text-align: center;
}
.container>p{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="container">
<p>这是内容这是内容这是内容这是内容</p>
</div>
网友评论