css居中办法学习笔记

tanglijun 发布于2019-08-30 13:49 / 2725人阅读

摘要：常用于文字对其居中第五种居中好处就是不可不用定义宽高，但是对于不兼容的浏览器没有作用第六种伪类居中第八种布局同样，会存在浏览器兼容问题

第一种：通过margin负值

.one{
    position: absolute;
    width: 200px;
    height: 200px;
    top:  50%;
    left: 50%;
    margin-left: -100px;
    margin-right: -100px;
    background: green;
}

优点：
基本浏览器都能兼容

缺点：
必须要固定宽高

第二种：通过margin:auto

.two{
    position: absolute;
    width: 100px;
    height:100px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

以上两种方法都可以把absolute换成fixed,注意，fixed在ie下不支持

第三种：table-cell

.inner{
    width: 100px;
    height: 100px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.foo{
    display: inline-block;
    width: 50%;
    height: 50%;
}

设置了table-cell之后，父元素就变成了一个单元格
关于使用table-cee布局

第四种：行内元素居中


    内容居中

.four{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}

这种方法只能居中行内元素。常用于文字对其居中

第五种：transform居中

.five{
    position: absolute;
    top: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
}

好处就是不可不用定义宽高，但是对于不兼容css3的浏览器没有作用

第六种：伪类居中

.six{
    position:aabsolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    }
.six:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    }
.six .content{
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    line-height: 40px;
    }

第八种：flex布局

.eight{
    display: flex;
    align-items: center;
    justify-content: center;
}

同样，会存在浏览器兼容问题

idc机房托管服务器托管 html居中css 学习笔记学习笔记一基础学习笔记

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

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

css居中办法学习笔记

摘要：常用于文字对其居中第五种居中好处就是不可不用定义宽高，但是对于不兼容的浏览器没有作用第六种伪类居中第八种布局同样，会存在浏览器兼容问题第一种：通过margin负值 .one{ position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin-l...

philadelphia 2019-08-01 17:51 评论0 收藏0
前端-CSS3&H5

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

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

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

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS学习笔记－元素水平垂直居中

摘要：前言布局中经常会遇到元素水平居中的需求今天根据以前的学习笔记以及看过的一些技术博客做个元素水平居中的小结。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。前言布局中经常会遇到元素水平居中的需求,今天根据以前的学习笔记?以及看过的一些技术博客做个元素水平居中的小结。正文图片的水平垂直居中 //图片地址为http://static.jsbin.com/ima...

NeverSayNever 2019-08-28 18:28 评论0 收藏0
【学习笔记】CSS深入理解之line-height

摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。张鑫旭的CSS深入理解之line-height学习笔记 line-height的定义行高：两行文字基线之间的距离为何是基线：基线是定义所有字线的根本不同字体...

Stardustsky 2019-08-30 15:54 评论0 收藏0