前端开发常用css居中布局

Mike617 发布于2019-08-01 17:08 / 1377人阅读

摘要：必不可少，这是其一，还有一种这些都是常用的居中方式，在中，还可以使用弹性布局来居中元素，下篇文章在详细说明。

在前端开发中，经常会碰到布局需要左右居中，上下居中的情况，在现代浏览器中实现居中还是挺方便的，本文只考虑在高版本现代浏览器中的情况，不考虑IE.

1.文本居中属性 text-align

这是常用的水平居中图片，按钮，文字等行内元素的方法，但不能上下居中

abcedd

实现效果：

2.自动居中 margin:auto

此方法也只能实现水平居中，具体用法为：margin:0 auto

    .sub {
        width: 200px;
        height: 200px;
        background: red;
        margin: 0 auto;
    }

实现效果：

3. 用line-height实现文字上下居中

    .sub {
        width: 200px;
        height: 200px;
        background: #ccc;
        margin: 0 auto;
        line-height: 200px;
        text-align: center;
    }

4.表格居中

如果使用表格居中的话，用表格属性 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 就可以实现左右上下居中了

5.使用display:table-cell来居中

对于不是表格的元素，可以使用display:table-cell模拟表格，实现居中的目的。这种情况下，父级容器要指定宽度，用百分比的话达不到左右居中的目的

6.使用定位position

要注意的是。margin:auto必不可少，这是其一，还有一种

这些都是常用的居中方式，在css3中，还可以使用弹性布局来居中元素，下篇文章在详细说明。

转自：http://dawns.me/2017/07/04/ht...

GPU云服务器云服务器 html5前端开发css3 布局居中水平居中布局 html居中css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50971.html

css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0