html元素垂直水平居中显示,关于css:html-元素垂直水平居中
一、 不定宽高元素程度垂直居中
1、transform: translate()
程度垂直居中
.wrapper{
background-color: #eee;
height:200px;
}
.center{
position: relative;
width: 300px;
padding: 10px 20px;
background-color: #2c3e50;
color: #fff;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
}
毛病:IE9以下不兼容
2、flex 布局,利用justify-content和align-items 实现居中
程度垂直居中
.wrapper{
height:200px;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
.center2 {
position: relative;
width: 300px;
padding: 10px 20px;
background-color: #2c3e50;
color: #fff;
}
3、应用table+table-cell实现垂直居中,display:inline-block;或margin: auto;实现程度居中
程度垂直居中
.wrapper{
background-color: #eee;
height: 200px;
width: 100%;
display: table;
}
.content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.center3 {
display: inline-block;
width: 300px;
padding: 10px 20px;
background-color: #2c3e50;
color: #fff;
}
4、伪元素:after, :before 应用inline-block+ vertical-align:middle 对齐伪元素
程度垂直居中
.wrapper {
background-color: #eee;
height: 200px;
width: 100%;
position: relative;
}
.wrapper:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.center4 {
background-color:#2c3e50;
padding: 10px 20px;
color:#fff;
display: inline-block;
}
5、writing-mode: 扭转文字的显示方向
程度垂直居中
.wrapper {
background-color:#eee;
width: 100%;
height: 200px;
writing-mode: vertical-lr;
}
.content {
writing-mode: horizontal-tb;
display: inline-block;
width: 100%;
}
.center5 {
background-color:#2c3e50;
padding: 10px 20px;
color:#fff;
display: inline-block;
margin: auto;
text-align: left;
}
二、 固定宽高元素程度垂直居中
6、absolute+ 负margin
程度垂直居中
.wrapper {
background-color: #eee;
height: 200px;
width: 100%;
position: relative;
}
.center6{
background-color: #2c3e50;
color: #fff;
width: 300px;
height: 50px;
line-height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -25px;
}
设置相对定位,left:50%; top: 50%;使以后元素的左上角处于父元素的核心地位, 再利用负margin使其核心位于父元素的核心。
7、absolute+ 上下左右等值
程度垂直居中
.wrapper {
background-color: #eee;
height: 200px;
width: 100%;
position: relative;
}
.center7 {
background-color: #2c3e50;
color: #fff;
width: 300px;
height: 50px;
line-height: 50px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
html元素垂直水平居中显示,关于css:html-元素垂直水平居中相关推荐
- css审查元素一直有一块html,css父元素定位后子元素审查元素位置错乱
父元素position:fixed写了一个遮罩层,里面的子元素审查元素位置错乱,在超出这个元素的位置还能定位到这个元素 直播平台授权 .toolstip { position: fixed; left ...
- html中怎么设置文本框居中显示图片,css如何让图片水平居中显示?
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中. display属性实现图片居中的两种方法: 1 ...
- 动态切换父元素隐藏和显示里面的子元素的动画会再一次执行吗?
代码: 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- CSS的元素的隐藏与显示
显示与隐藏 1.介绍: display:使段落生出行内框 visibility :属性规定元素是否可见. 2.display属性 值 描述 none 此元素不会被显示. block 此元素将显 ...
- html 内联 块级元素,浏览器内核,css继承性
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
- CSS隐藏元素五种方法
css隐藏元素的方法 1.利用opacity透明度来隐藏,opacity设置为0,它只是一种视觉隐藏,元素本身依旧占用它的位置并对网页的布局起到作用,它也同样影响用户交互.在读屏软件中会被识别. 2. ...
- HTML相玲选择器,CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
- html 指定对象为块元素,html内联(行内)元素、块级(块状)元素和行内块元素分类...
HTML可以将元素分类方式分为内联(行内)元素.块级(块状)元素和行内块元素三种. 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内 ...
- 前端笔记(9)元素的隐藏与显示,css用户界面样式,vertical-align垂直对齐,溢出文字省略号显示,css精灵技术,过渡,焦点,滑动门,margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式 鼠标样式cursor 轮廓线outline ...
最新文章
- ASP.NET 2.0 HttpHandler实现生成图片验证码(示例代码下载)
- ggsurvplot图片输出
- 要啥给啥的写作AI:新闻评论小说都能编,题材风格随便选,真假难辨,16亿参数模型已开源...
- c++ eos智能合约开发_TrustBase平台智能合约的开发与实现
- java调用webservice几种方式
- ajax异步提交案例(用户校验)
- MySQL怎么导出用户权限表_导出MySQL用户权限_MySQL
- 借助xUnit减少了生产问题
- linux操作系统分区图解,图解磁盘分区介绍(超经典)
- Oracle用户角色权限管理
- 修改字段名和字段备注
- 两大思维,就可以让你轻松完成任意一个目标
- 如何区分Babel中的stage-0,stage-1,stage-2以及stage-3(转)
- PS CC2017安装及破解
- DBA-doing business as
- 网络软件-管理网络设备和组件
- 再来看一下培根的<论读书>吧!
- 联想Phab2 Pro Tango手机测评
- 虚拟机登录MySQL
- 基于GEE与哨兵1号影像数据提取水体