CSS水平垂直居中总结
行内元素水平居中
把行内元素包裹在块级父元素中，且父元素中的css设置text-align:center;
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>css水平垂直居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="container">行内元素水平居中</div>
</body>
</html>
块状元素水平居中
将块状元素的左右外边距设置为auto即可。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc; }
#box1{
width:300px;
height:300px;
background:#fff;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">块状元素水平居中</div>
</div>
</body>
</html>
多个块状元素水平居中的情况：
1、传统方法：将水平排列的块状元素设置为：display：inline-block；然后父元素设置为text-align:center;即可。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
text-align: center;
}
.box1{
width:300px;
height:300px;
background:#fff;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
</div>
</body>
</html>
2、使用弹性盒子：将父元素设置为display：-webkit-box；-webkit-box-pack：justify（或center）；注意兼容性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
display: -webkit-box;
-webkit-box-pack:justify;/*box-pack决定了父元素水平空间的使用*/
}
.box1{
width:300px;
height:300px;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
<div class="box1">块状元素水平居中</div>
</div>
</body>
</html>
已知元素宽高水平垂直居中
1、绝对定位与margin
这个方法使用了position:absolute;有固定宽高的div，被设置为top：0；bottom:0;因为它有固定高度，不能与上下的间距都为0，margin：auto；会使它居中。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
position: relative;
width:1000px;
height:500px;
}
.box1{
position: absolute;
background:#fff;
width: 300px;
height: 300px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto; }
</style>
</head>
<body>
<div id="container">
<div class="box1">已知元素宽高水平垂直居中</div>
</div>
</body>
</html>
2、绝对定位与margin负值
利用绝对定位，将元素的top、left值设为50%，然后设置外边距margin-left：width/2；margin-top:height/2；实现垂直居中效果
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>多个块状元素水平居中</title>
<style>
body{background:#000;}
#container{
background: #ccc;
position: relative;
width:1000px;
height:500px;
}
.box1{
position: absolute;
background:#fff;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
margin-left:-150px;
margin-top:-150px;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">已知元素宽高水平垂直居中</div>
</div>
</body>
</html>
未知元素宽高水平垂直居中
1、把div的显示方式设置为表格，使用表格的vertical-align属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>未知宽高的元素水平垂直居中</title>
<style>
body{background: #000;font-size: 24px;}
#wrapper{
display: table;
background: #ccc;
width: 1000px;
height:300px; }
#cell{
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="cell">
<div class="content">未知宽高的元素水平垂直居中</div>
</div>
</div>
</body>
</html>
2、跟上面提到的多个块状元素水平居中的用法差不多，这里用到弹性盒子是要注意浏览器的兼容性；（这里被居中元素的宽度由其里面的内容决定）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>未知宽高的元素水平垂直居中</title>
<style>
body{background: #000;font-size: 24px;}
#container{
margin:30px auto;
background: #ccc;
width: 1000px;
height:300px;
display: -webkit-box;
-webkit-box-pack:center;
}
#container .box1{
background: red;
}
#container .box2{
background: green;
}
#container .box3{
background: yellow;
}
</style>
</head>
<body>
<div id="container">
<div class="box1">未知宽高的元素水平垂直居中</div>
<div class="box2">未知宽高的元素水平垂直居中</div>
<div class="box3">未知宽高的元素水平垂直居中</div>
</div>
</body>
</html>
CSS水平垂直居中总结的更多相关文章
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
- 把简单做好也不简单-css水平垂直居中
44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
- CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
- css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- 介绍一种css水平垂直居中的方法（非常好用！）
这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...
- css水平垂直居中
margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...
随机推荐
- JSON基本用法
JSON基本用法 2016-08-10 16:42:19 JSON的全称是“JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语 ...
- 阅读笔记 The Impact of Imbalanced Training Data for Convolutional Neural Networks [DegreeProject2015] 数据分析型
The Impact of Imbalanced Training Data for Convolutional Neural Networks Paulina Hensman and David M ...
- php 正则获取html属性值
个人不会写正则,但是工作中遇到了又没办法,所以记录下以后再遇到就好找了,呵呵 言归正传,下面是用正则匹配img的属性的方法: 1.匹配 “img” 中的 “src” 属性 $str='<img ...
- error C2065: 'INVALID_SET_FILE_POINTER' : undeclared identifier
Searching MSDN for that constant brings up one result: it's a failure code for SetFilePointer() and ...
- Ubuntu遇到Please ensure that adb is correctly located at '...adb.exe' and can be executed 问题解决方法
上次我们在SDK更新的到最新的Android L版本之后,我发现我的ADT和android指定的版本不对应,我的ADT是22版本的,android L需要23版本以上的,版本不对应的话就无法加载这个S ...
- 【使用git】初识git
0. 版本控制 版本控制是一种记录若干文件内容变化,以便将来查阅特定版本修改情况的系统(vcs). svn等是集中式版本控制,即服务器在单一机器上,每次checkout变化的文件,若机器故障,则有可能 ...
- SQL调优之排名优化
mysql> explain extended select t.rowno from (SELECT @rowno:=@rowno+1 as rowno,ur.customer_id as u ...
- 理解POCO
理解POCO(Plain Old CLR Object)先要理解POJO. 1.什么是POJO? POJO的名称有多种,pure old java object .plain ordinary jav ...
- Webpack使用教程六（Plugins）
webpack可以通过插件进行功能扩展.webpack拥有很多的内置插件和第三方插件.下面以webpack自带的插件bannerPlugin为例,说明插件的简单用法.bannerPlugin可以将任何 ...
- LINQ to SQL大全
LINQ to SQL语句 (1)之Where Where操作 适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判断条件就是它后面所接的 ...