css实现水平居中和垂直居中方法大全

来源:程序思维浏览:1810次

内联元素居中方案

水平居中设置:

行内元素 设置 text-align:center;

Flex布局 设置父元素display:flex;justify-content:center;(灵活运用)

垂直居中设置:

父元素高度确定的单行文本(内联元素) 设置 height = line-height;

父元素高度确定的多行文本(内联元素)

a:插入 table (插入方法和水平居中一样),然后设置vertical-align:middle;

b:先设置 display:table-cell 再设置 vertical-align:middle;

块级元素居中方案

水平居中设置:

定宽块状元素 设置 左右 margin 值为 auto;

不定宽块状元素;

a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;

b:给该元素设置 display:inine 方法;

c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%;

垂直居中设置:

垂直居中是最复杂的,下面详细看下块级元素垂直居中的几种方法:

1. 元素定高:使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

.box {
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;/*或fixed*/
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

2. 不定高不定宽:利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了:

.box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;/*或fixed*/
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

3. 利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;

HTML代码:

<div class="box">
    <span>多行文字,此处居中设置</span>
</div>

CSS代码:

.box{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100px;
    height: 120px;
    background: purple;
}
.box span{
    display: inline-block;
    vertical-align: middle;
}

4.使用CSS3的新属性transform:translate(x,y)属性(不定高,不定宽);

HTML代码:

<div class='box'>
    垂直居中
</div>

CSS代码:

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

5. 使用before,after伪元素(定高不定宽);

HTML代码:

<div class='box'>
    <div class='content'>
        垂直居中
    </div>
</div>

CSS代码:

.box{
    display: block;
    background: rgba(0,0,0,.5);
    height: 100px;
}
.content::before{
    content: '';
    display: block;
    vertical-align: middle;
    height: 100%;
}
.content::after{
    content: '';
    display: block;
    vertical-align: middle;
    height: 100%;
}
.box .content{
    height: 33px;
    line-height: 33px;
    text-align: center;
}


6.Flex布局(不定高,不定宽);

HTML代码:

<div class='box'>
    <div class='content'>
        垂直居中
    </div>
</div>

CSS代码:

.box{
    background-color: red;
    height: 200px;
    display: flex;
    /*水平居中*/
    justify-content: center;
    /*垂直居中*/
    align-items: center;
}
精品好课
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
收藏
扫一扫关注我们