【CSS】3种CSS方法设置元素垂直水平居中
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方法设置元素垂直水平居中的更多相关文章
- 巧用translate设置元素垂直水平居中
之前在做手机项目时,用到很多自定义弹窗,然后要求都垂直水平要居中,最开始的时候想用calc来计算,可是css3 的calc兼容性不是很好,于是后来就借助了js来计算, 今天偶然看到别人的一个方法,瞬间 ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制
1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...
- 纯CSS实现元素垂直水平居中-非固定宽度
这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...
- html笔记04:在html之中导入css两种常见方法
1.导入式: <html> <head> <title></title> <style type="text/css"> ...
- 【css】一行或者多行文字垂直水平居中
1.方法一:使用css3弹性盒子(兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持) <!DOCTYPE html> <html> < ...
- 使用jQuery的".css()"和".attr()"方法设置元素"left"属性的注意点
今天在使用jQuery方法".css()"设置"ajax-loader.gif"的位置时出了点小状况,关键代码如下(为了简化,这里假定要给"ajax- ...
- CSS()方法设置元素样式
使用CSS()方法可以直接设置元素的样式,方法为:css(name,value) $(p).css("font-weight", "bold"); // ...
- css中设置div垂直水平居中的方法
设置要水平垂直居中的div的position为absolute,left:50%;margin-left为负的这个元素宽度的一半,同理,top:50%;margin-top为负的这个元素的高度的一半. ...
随机推荐
- windows下Python扩展问题error: Unable to find vcvarsall.bat
由于对于Windows下Python扩展不熟,今天遇到一个安装问题,特此做个tag.解决方式在stackoverflow上,网址例如以下: http://stackoverflow.com/quest ...
- call function
1 call递归扩展变量 本质上仍然是变量扩展,等价于$(),只不过扩展的时候带了参数,$(call xxx)返回的是xxx扩展之后的值.参数依次赋值给$(1),$(2)......,但是参数要在赋值 ...
- JS之RegExp对象(二)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/zkn_CS_DN_2013/article/details/24243159 RegExp对象的经常 ...
- div+css通用兼容性代码整理
一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...
- android8 Notification
界面Layout: customnotice.xml <?xml version="1.0" encoding="utf-8"?> <Li ...
- javaScript查找HTML元素
1.通过id查找 例:查找id="intro"元素 var x=document.getElementById("intro"); 2.通过标签名查找 例:查找 ...
- 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 ...
- ubuntu安装ibus-goolepinyin通用方法
1:获取安装包 http://code.google.com/p/libgooglepinyin/downloads/list
- bzoj2461: [BeiJing2011]符环
再做水题就没救了 考虑DP...我们把正反面一起弄 fi,j,k,u表示第几个位置,正面多了多少左括号,背面多了多少没办法消的右括号,背面结尾的左括号数 #include<cstdio> ...
- windows系统下mysql5.5查看和设置数据库编码
1.显示当前编码命令: show variables like 'char%'; 2.设置编码为utf8命令:set names 'utf8';