css元素水平垂直居中
2019-08-09 15:19
971 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/tinfengyee/article/details/98957690
页面结构
vertical-align: middle;针对行内块元素使用 , 如 input 对齐, img 去掉下边空白,
<body> <div class="box"> <div class="wrapper">hehe</div> </div> </body>
行内元素
父设置
text-align:center;实现水平居中,元素设置行高
line-height: 500px;垂直居中.
/* 父元素设置line-height 可以让文本之类的垂直居中 */ <style> .box { width: 500px; height: 500px; background-color: rgb(108, 202, 209); text-align: center; line-height: 500px; } .wrapper { background-color: rebeccapurple; display: inline; border:1px solid red; } </style> /* 子元素行高等于父元素高度 */ <style> .box { width: 500px; height: 500px; background-color: rgb(108, 202, 209); text-align: center; } .wrapper { line-height: 500px; background-color: rebeccapurple; display: inline; border:1px solid red; } </style>
块级元素
1 绝对定位 + transform
<style> .box { width: 500px; height: 500px; background-color: rgb(108, 202, 209); position: relative; } .wrapper { position: absolute; width: 100px; height: 100px; background-color: rebeccapurple; display: block; border: 1px solid red; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style>
2
flex布局,推荐
<style> .box { width: 500px; height: 500px; background-color: rgb(108, 202, 209); display: flex; justify-content: center; align-items: center; } .wrapper { width: 100px; height: 100px; background-color: rebeccapurple; display: block; border: 1px solid red; } </style>
3
display: table-cell;
<style> .box { width: 500px; height: 500px; background-color: rgb(108, 202, 209); display: table-cell; text-align: center; /* 行内块元素用这个 */ vertical-align: middle; } .wrapper { width: 100px; height: 100px; background-color: rebeccapurple; /* display: block; */ display: inline-block; /* margin: 0 auto; 块级元素 要同这个 */ border: 1px solid red; } </style>
margin:0 auto;水平居中,要设置宽度
<style> .box { width: 500px; height: 500px; background-color: rgb(108, 202, 209); } .wrapper { width: 100px; height: 100px; background-color: rebeccapurple; display: block; border: 1px solid red; margin: 0 auto; } </style>
行内块元素
<style> .box { width: 500px; height: 500px; background-color: rgb(108, 202, 209); text-align: center; line-height: 500px; } .wrapper { width: 100px; height: 100px; background-color: rebeccapurple; display: inline-block; border:1px solid red; line-height: 100px; /* 让盒子下来 */ } </style>
相关文章推荐
- CSS实战技巧:块级元素水平垂直居中
- 【CSS】前端页面中常用的文字和区块元素的水平和垂直居中的设置方法
- CSS元素水平垂直居中方案总结
- CSS:如何让元素在页面中水平垂直居中?
- CSS中元素水平居中和垂直居中的方法
- CSS设置行内元素和块级元素的水平居中、垂直居中
- 根据HTML+CSS完成一个三列布局,左右侧栏宽为180px,高为300px;中间栏自适应,高为300px;中间栏子元素(宽高不确定)实现水平、垂直居中。
- CSS内联元素、块级元素的水平居中和垂直居中方法总结
- 纯CSS设计div内部元素水平垂直居中
- 纯css实现元素水平垂直居中
- 【CSS】子元素水平垂直居中
- CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)
- CSS实现垂直居中的常用方法 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直
- 探究css中各种情况下的元素的垂直和水平居中的问题(面试题)
- CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)
- CSS中元素水平垂直居中4种方法介绍
- css 元素水平垂直居中总结
- CSS设置行内元素和块级元素的水平居中、垂直居中
- css元素的垂直水平居中;flex 已知元素宽高 未知元素宽高
- CSS之元素水平/垂直居中问题