常见的水平居中布局方式

在页面布局时，常常需要把某些元素水平居中放置，下面总结几种令元素水平居中的方法。
text-align：center
如果子元素是行内元素，那么可以设置其父元素的text-align:center，这样元素就能实现水平居中了。但是对于块元素此方法则行不通了。
margin:0 auto
如果元素属于块元素，可以设置元素的margin样式–margin:0 auto。但是仅仅设置margin还不行，必须设置其width长度；如果width设置为100%,元素则不能水平居中。
flex弹性布局
flex是CSS3新添加的一个属性，在子元素的宽度已知的情况之下，可以设置如下：
.son{
display: flex;
justify-content: center;
}
虽然flex简单快捷、代码量少，可以解决布局方面的很多棘手的问题，但是它的兼容性不是很好。

绝对定位position
使用绝对定位的方式也能实现水平居中，设置如下:
div{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
虽然使用position可以实现水平居中，但是当浏览器窗口大小变化时，其可能会出现其他的问题，譬如：元素挤满了某一行，导致元素的排列顺序零乱。

转载于:https://www.cnblogs.com/akeyf/p/7747046.html

常见的水平居中布局方式相关推荐

CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
常见五大CSS 布局方式总结
常见五大CSS 布局方式总结之所以总结是因为最近也是在看css方面,让我迷惑的是有很多文章关于布局名词都没有听说过,工作中也很少用.但是我们要与时俱进,叫的多了,它就成为正式名词了.比如 '双 ...
移动端常见的开发布局方式
一.流式布局流式布局就是百分比布局,也称非固定像素布局.它通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充.流式布局方式是移动web开发中使用的比较常见的布 ...
常见的网站布局方式---左固定右自适应、左右固定中自适应等
偶尔看到的一篇博文,觉得挺有用的,刚好前两天做项目的时候自己也遇到这个问题,觉得解决方案很好,所以搞过来,大家一起学习一起进步! 左边定宽.右边自适应(类似管理台) 方案一左边设置左浮动,右边宽度设 ...
css的常见6种布局方式
下面主要是针对三栏布局进行介绍:常见的三栏布局有,流体布局.圣杯布局.双飞翼布局.flex布局.绝对定位布局.网格布局流体布局两边的宽度是固定的,中间的宽度是可以根据屏幕的大小进行改变的.实现的关 ...
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
css布局方式_手把手教你CSS Flex布局「真香」
作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...
css的几种布局方式都在这
说道布局方式,是我们经常遇到的问题,下面我们就来讲解css的常见的一些布局方式. 1.双飞翼布局(两边定宽,中间自适应) 主要是通过浮动与margin实现,代码如下: <!DOCTYPE htm ...
CSS常见的几种布局方式
在看前端面试题的时候经常会看到css的布局方式,今天整理一下分享给大家. #单列布局 #两列自适应布局 #三栏布局(圣杯布局和双飞翼布局) 一.单列布局常见的单列布局有两种: header.cont ...

常见的水平居中布局方式

常见的水平居中布局方式相关推荐

最新文章

热门文章