iis访问网站打开要很久,做网站好还是做微信小程序好,广州做网站建设的公司,要是360网站不安全怎么做css水平垂直居中的技巧 1. 水平垂直居中#xff08;场景一#xff09;2. 水平垂直居中#xff08;场景二#xff09;3. 水平垂直居中#xff08;场景三#xff09;4. 水平垂直居中#xff08;场景四#xff09; 1. 水平垂直居中#xff08;场景一#xff09;
条件场景一2. 水平垂直居中场景二3. 水平垂直居中场景三4. 水平垂直居中场景四 1. 水平垂直居中场景一
条件一个固定大小的div包含一个固定大小的div。
效果让内部的div位于外部div水平垂直居中的位置且内部的div文本水平垂直居中。
注意事项父元素的第一个子元素margin塌陷的问题。
htmlstyle.outer {height: 500px;width: 500px;background-color: brown;margin: 0 auto;/* 解决margin塌塌陷问题 */overflow: hidden;}.inner {height: 100px;width: 100px;background-color: aqua;/* 设置该元素在父元素中水平居中 */margin: 0 auto;margin-top: 200px;/* 设置该元素中的文本水平居中 */text-align: center;/* 设置该元素中的文本垂直居中 */line-height: 100px;}/stylediv classouterdiv classinnerhello/div/div
/html2. 水平垂直居中场景二
条件一个固定大小的div包含一个行内元素、行内块元素。
效果让内部的行内元素、行内块元素都位于外部div水平垂直居中的位置。
注意事项基线的影响。
htmlstyle.outer {height: 500px;width: 500px;background-color: brown;/* 设置内部文本或行内元素水平居中 */text-align: center;/* 设置内部文本或行内元素垂直居中 */line-height: 500px;/* 为了让其子元素正好垂直居中没有偏差 */font-size: 0;}.inner {background-color: aqua;/* 行内元素的基线相对于该元素所在行的基线的垂直对齐 */vertical-align: middle;font-size: 20px;}img {height: 100px;width: 100px;vertical-align: middle;}/stylediv classouterspan classinnerhello/spanimgsrchttps://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png//div
/html3. 水平垂直居中场景三
条件一个伸缩容器。
效果让伸缩项目在伸缩容器的水平垂直居中位置。
实现方式一
htmlstyle.div1 {width: 500px;height: 500px;background-color: blueviolet;/* 设置为伸缩容器 */display: flex;/* 主轴上居中对齐 */justify-content: center;/* 侧轴上居中对齐 */align-items: center;}.div2 {width: 200px;height: 200px;background-color: blue;}/stylediv classdiv1div classdiv2/div/div
/html实现方式二
htmlstyle.outer {width: 500px;height: 500px;background-color: blueviolet;/* 设置为伸缩容器 */display: flex;}.inner {width: 200px;height: 200px;background-color: blue;/* 设置margin为auto会让伸缩项目水平垂直居中 */margin: auto;}/stylediv classouterdiv classinner/div/div
/html4. 水平垂直居中场景四
条件一个固定大小的div。
效果让div在视口的水平垂直居中位置。
注意事项视口的大小不固定。
htmlstylebody {/* 设置body的高度为视口的高度 */height: 100vh;/* 设置为伸缩容器 */display: flex;}.div1 {width: 500px;height: 500px;background-color: brown;/* 垂直水平居中父元素 */margin: auto;}/stylediv classdiv1/div
/html代码中vh单位是相对于视口高度的百分比更多长度单位介绍可以参考另一篇博文长度单位介绍
ps运行代码无论怎么调整视口的大小红色块始终位于视口的水平垂直居中的位置。
