css的几种垂直水平居中方法

总结了几种css居中实现的方式,注:*为常用方式,“wrap”为容器,“div”为要居中的元素。

*1.绝对定位,宽高都已知的情况下如下代码可实现,或者可以使用negative margins;

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

2.不知道元素的宽高,仅仅实现某个div是其父的1/2,水平垂直居中,随着父元素的大小等比例放大或者缩小。

.div{
    position: absolute;
    left: 30%;
    right:30%;
    top: 25%;
    bottom:25%;
}

*3.translate,宽度已知,高度未知的情况下

.wrap{
    width:200px;//也可以不写,默认占总宽度的50%
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);    -webkit-transform: translate(-50%,-50%);
}

4.table-cell,div本身高度未知,仅仅实现垂直居中的情况下,ps,此种情况div宽度是100%

.wrap{//外层容器
    display: table;
}
.div{//内层容器
    display: table-cell;
    vertical-align: middle;
}

*5.flex布局,宽度都不固定的情况下,只要在父容器中设置display:flex即可。

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

6.hack方法,善于运用:after。

.wrap {
    text-align: center;
    overflow: auto;
}
.wrap:after,
.div {
    display: inline-block;
    vertical-align: middle;
}
.div:after {
    content: ‘‘;
    height: 100%;
    margin-left: -0.25em; /* 需要根据不同的字号做调整 */
}
.wrap {
    max-width: 99%; /* 防止文档过长时会到容器的顶部 */
    max-width: calc(100% - 0.25em) /* Only for IE9+ */
}

  

  

  

  

时间: 2024-10-25 21:27:23

css的几种垂直水平居中方法的相关文章

CSS垂直水平居中方法总结

在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"></div> </div> 1.水平居中:margin:auto; .wrap{ width: 400px; height: 400px; background-color: lightblue; } .content{ width: 200px; height: 200px; ba

垂直水平居中方法小结

前言:最近看到很多面试题目会问:请说出几种使用css完成垂直水平居中的方法?正好看css基础的时候看到一篇文章是讲完全居中的,这边对于文章中的内容做个小结. 一.使用absolute(Absolute Centering) 1.1 具体代码如下: .container { position: relative; } .absolute_center { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 50%; he

css图片响应式+垂直水平居中

转载请注明: TheViper http://www.cnblogs.com/TheViper  效果 要求: 1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了. 2.浏览器尺寸变化时,图片总是等比例拉伸或缩放. 3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的. 4.图片始终保持水平垂直居中. 5.图片的行列数不变,这里一直都是3*3. 下面来搞定一个个要求. 满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级浏览器居中常用的什么 disp

css 中让盒子垂直水平居中

css中如何让div盒子垂直水平居中 整体代码如下:(仅供参考) <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .box{ width: 200px; height: 200px; position:absolute; left:50%; top:50%; mar

css图片响应式+垂直水平居中2

转载请注明: TheViper http://www.cnblogs.com/TheViper  上一篇说的是限定图片组最大宽度情况下,其中图片的响应式+垂直水平居中. 实际上,结合本屌的这篇模拟flexbox justify-content的space-between,space-around,然后不限定图片组最大宽度,会发现当浏览器窗口较宽的时候,会出现和flexbox space-between一样的效果,即一行的第一个图片在最左边,最后一个图片在最右边,图片间间距一样.此时设置图片间的百

css布局中的垂直水平居中对齐

前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-to

css实现垂直水平居中的5种方法

css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; border:1px solid #000; display: table-cell; text-align: center; vertical-align: middle; } #small{ display: inline-block; width: 50px; height: 50px; backgro

web前端入门到实战:CSS不定宽高的垂直水平居中,9 种方式总汇

垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及.所以,今天我们就来聊聊 9 种不同的居中方法. 有常见的 flex.transform.absolute 等等.也有 CSS3 的网格布局.还有伪元素的方法,是的,你没有看错,::after 和 ::before 也可以实现居中. 1.flex 大家的第一反应,可能就是 flex 了.因为它的写法够简单直观,兼容性也没什么问题.是手机端居中方式的首选. <div class="wrapper flex-center&q

垂直水平居中的几种方法

1,(元素在容器中垂直水平居中) css: .box{width:800px;height:800px;background:#ccc;display:flex;justify-content:center;align-items:center;} .box div{width:300px;height:300px;background:red;} html:  <div class="box"> <div></div> </div> 2