1. 宽高固定

设置要水平垂直居中的 div 的 position 为 absolute,left:50%; margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半。

#child {
width:300px;
height:200px;
position:absolute;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-100px;
}

2. 宽高不固定

由 1 可演变,既然 margin-left ,margin-top 为负的这个元素宽度, 高度的一半, 那么也可用百分比设置啊,使用 transform 属性, translate 平移水平、垂直方向的百分值。即

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

  

3. flex 布局

还可以用 flex 布局哦~ 仅需要父级元素配置就好了~

#parent {
display: flex;
justify-content: center;
align-items:center;
}

  

 由此,便可以实现子元素的上下左右居中的效果,快去试试把~

【CSS】3种CSS方法设置元素垂直水平居中的更多相关文章

  1. 巧用translate设置元素垂直水平居中

    之前在做手机项目时,用到很多自定义弹窗,然后要求都垂直水平要居中,最开始的时候想用calc来计算,可是css3 的calc兼容性不是很好,于是后来就借助了js来计算, 今天偶然看到别人的一个方法,瞬间 ...

  2. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  3. CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  4. 纯CSS实现元素垂直水平居中-非固定宽度

    这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...

  5. html笔记04:在html之中导入css两种常见方法

    1.导入式: <html> <head> <title></title> <style type="text/css"> ...

  6. 【css】一行或者多行文字垂直水平居中

    1.方法一:使用css3弹性盒子(兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持) <!DOCTYPE html> <html> < ...

  7. 使用jQuery的".css()"和".attr()"方法设置元素"left"属性的注意点

    今天在使用jQuery方法".css()"设置"ajax-loader.gif"的位置时出了点小状况,关键代码如下(为了简化,这里假定要给"ajax- ...

  8. CSS()方法设置元素样式

    使用CSS()方法可以直接设置元素的样式,方法为:css(name,value) $(p).css("font-weight", "bold");     // ...

  9. css中设置div垂直水平居中的方法

    设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...

随机推荐

  1. windows下Python扩展问题error: Unable to find vcvarsall.bat

    由于对于Windows下Python扩展不熟,今天遇到一个安装问题,特此做个tag.解决方式在stackoverflow上,网址例如以下: http://stackoverflow.com/quest ...

  2. call function

    1 call递归扩展变量 本质上仍然是变量扩展,等价于$(),只不过扩展的时候带了参数,$(call xxx)返回的是xxx扩展之后的值.参数依次赋值给$(1),$(2)......,但是参数要在赋值 ...

  3. JS之RegExp对象(二)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zkn_CS_DN_2013/article/details/24243159 RegExp对象的经常 ...

  4. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  5. android8 Notification

     界面Layout:  customnotice.xml <?xml version="1.0" encoding="utf-8"?> <Li ...

  6. javaScript查找HTML元素

    1.通过id查找 例:查找id="intro"元素 var x=document.getElementById("intro"); 2.通过标签名查找 例:查找 ...

  7. leetcode 395. Longest Substring with At Least K Repeating Characters

    Find the length of the longest substring T of a given string (consists of lowercase letters only) su ...

  8. ubuntu安装ibus-goolepinyin通用方法

    1:获取安装包 http://code.google.com/p/libgooglepinyin/downloads/list

  9. bzoj2461: [BeiJing2011]符环

    再做水题就没救了 考虑DP...我们把正反面一起弄 fi,j,k,u表示第几个位置,正面多了多少左括号,背面多了多少没办法消的右括号,背面结尾的左括号数 #include<cstdio> ...

  10. windows系统下mysql5.5查看和设置数据库编码

    1.显示当前编码命令: show variables like 'char%'; 2.设置编码为utf8命令:set names 'utf8';