居中解决方案。
居中是前端经常面临的问题,居中分为水平居中和垂直居中,而以垂直居中更难。
水平居中
行内元素只需要在其父元素上设置text-align: center
即可。
块级元素不仅需要在其父元素上设置text-align: center,还要让它的margin:0 auto;
垂直居中
请移步:vertical-align属性与垂直居中学习笔记
给定宽高的元素居中
1. 绝对定位法+margin:auto
.Center-Container {
position: relative;
}
.Absolute-Center {
width: 50%;/**/
height: 50%;/*自己撑开也行,不一定是50%*/
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
[水平居中]块状元素
利用:margin:0 auto;水平居中
这些问题自己都要会答
一些自认为是不优雅的方法记录
- 负边距
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css" media="screen">
html,body{
height:100%;
width:100%;
padding:0;
margin:0;
}
.floater{
height: 50%;
margin-bottom: -70px;
background:transparent;
}
.target{
background: blue;
height: 140px;
}
</style>
<div class="floater"></div>
<section class="target"></section>
</body>
</html>