CSS居中的多种方法
1.水平居中:
text-align 与 inline-block 的配合
<div id = "div_center_align">
<div id = "div_center_test"></div>
</div>
#div_center_align {
text-align: center
}
#div_center_test {
border:1px solid #ccc;
background-color: #ff2c42;
display: inline-block;
height: 10em;
width: 10em;
}
HTML 中在想要居中的元素外面套了一个父元素,然后在 CSS 中将父元素的 text-align 属性设为 center,接下来将子元素的 display 属性设为 inline-block 就可以水平居中了。
2.
水平居中:
通过 margin 实现
<div id = "div_center_margin"></div>
#div_center_margin {
width: 10em;
height: 10em;
border: 1px solid #ccc;
background-color: #ff2c42;
margin: 0 auto;
}
通过 margin 实现连父元素都不用套了,直接 margin: 0 auto; 搞定,对,就是这么简单快捷,恐怕是居中最常用的方法了吧.
3.垂直居中
<div id="div_center_margin02">
<div id="div_center_test"></div>
</div>
#div_center_margin02 {
position: relative;
background-color: #ff2c42;
height: 20em;
width: 50em;
}
#div_center_test {
border:1px solid #ccc;
background-color: #4053ff;
height: 10em;
width: 10em;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
- 子元素 div 绝对定位
- 父元素需要被定位
- 子元素 top、bottom、left、right 四个位置值均为 0
- 子元素 margin: auto;
4.垂直居中
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative; /*脱离文档流*/
top: 50%; /*偏移*/
/*
除了可以使用margin-top把div往上偏移之外,CSS3的transform属性也可以实现这个功能,通过设置div的transform: translateY(-50%),意思是使得div向上平移(translate)自身高度的一半(50%)。
*/
transform: translateY(-50%);或margin-top:-150px; }
5.水平垂直居中:CSS3新属性FLEX
<div id="div_center_flex">
<div class="div_center_test"></div>
<div class="div_center_test"></div>
</div>
#div_center_flex {
display: flex;
display: -webkit-flex;
align-items: center; /*垂直居中*/
-webkit-align-items: /* center; */
justify-content: center; /*水平居中*/
-webkit-justify-content: center;
height: 20em;
width: 50em;
background-color: #ff2c42;
}
.div_center_test {
border:1px solid #ccc;
background-color: #4053FF;
height: 10em;
width: 10em;
}
使用 flex 容器布局实现水平垂直居中的关键点在于:
父元素 display 属性设为 flex
垂直布局的属性是 align-items,设为 center 时便垂直居中
水平布局的属性是 justify-content,设为 center 时水平居中
子元素弹性居中,增加子元素也不会有影响
6.通过一起使用 box-align 和 box-pack 属性,对 div 框的子元素进行居中:
.parent{
width: 300px;
height: 300px;
border: 1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
.child
{
width:100px;
height:100px;
border:1px solid black;
}
7.通过一起使用 display:flex 和 margin: auto属性,对 div 框的子元素进行居中:
.parent{
border: 1px solid #ccc;
width: 200px;
height: 200px;
display: flex;
}
.child{
border: 1px solid #888;
width: 100px;
height: 100px;
margin: auto;
}
最新文章
- [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序
- Effective Java 阅读笔记——方法
- android 使用WebView 支持播放优酷视频,土豆视频
- python+selenium环境配置(windows7环境)
- NGINX当中的SSL配置(PEM启动密码免输入)
- Struts2 一张图片引发的bug
- An update on OS X Code Signing(OS X代码签名)
- 【python标准库】内建函数
- fatal error: gst/gst.h
- 2017《JAVA技术预备作业》 1502 陈明宇
- Servlet读取文件的最好的方式
- linux定时任务执行没结果,手动执行有结果问题总结
- django之Model类
- jspm 简介
- 前端开发笔记(3)css基础(中)
- java相关知识集锦
- 通过网站统计或系统监视器查看IIS并发连接数
- Eclipse获取资源路径
- Linux 禁止用户或 IP通过 SSH 登录
- 4.3.1 ThreadLoacl简单使用
热门文章
- C#LeetCode刷题之#234-回文链表(Palindrome Linked List)
- 解Bug之路-dubbo流量上线时的非平滑问题
- 解决";$ is not defined"; 亲自体验
- mysql无法远程连接问题(ERROR 1045 (28000): Access denied for user &#39;root&#39;)
- 01@-tornado
- Eligibility Traces and Plasticity on Behavioral Time Scales: Experimental Support of neoHebbian Three-Factor Learning Rules
- Java多线程_JUC包下的阻塞队列
- Sublime Text3 个人使用安装设置
- linux下使用split命令分割文件且文件号从1开始
- 利用Python爬虫刷新某网站访问量