一、Html中垂直居中的几个方法
1、利用绝对定位来实现垂直居中
a.利用transform样式旋转div实现
.content{
height: 400px; width: 400px; box-sizing: border-box; border: 1px solid; } .box{
width: 100px; height: 100px; line-height: 100px; text-align: center; box-sizing: border-box; background-color: #57faff; border: 1px dashed red; } .content_1{
position: relative; } .box_1{
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <div class="content content_1"> <div class="box box_1">
div>
div> b.利用margin: auto实现
.content_2{
position: relative; } .box_2{
position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } <div class="content content_2"> <div class="box box_2">
div>
div> 2、flex布局
利用flex弹性布局
.content_3{
display: flex; align-items: center; / 垂直居中 / justify-content: center; / 水平居中 / } <div class="content content_3"> <div class="box box_3">
div>
div> 3、table-cell实现水平垂直居中
让标签元素以表格单元格的形式呈现，使元素类似于td标签（ps: 水平居中，需要设置块状元素才能使用，否则无法居中）
.content_4{
display: table-cell; vertical-align: middle; text-align: center; } .box_4{
display: inline-block; / 设置成行内块元素 / } <div class="content content_4"> <div class="box box_4">
div>
div> 二、方案效果图
三、完成html页面代码
DOCTYPE html> <html> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="title" content="垂直居中方案"> <meta name="author" content="cxj"> <style> body,html{
height: 100%; width: 100%; font-size: 14px; } .main{
display: flex; } .plan{
margin-left: 20px; } .plan:first-of-type{
margin-left: 0; } .title{
margin-bottom: 5px; } .content{
height: 400px; width: 400px; box-sizing: border-box; border: 1px solid; } .box{
width: 100px; height: 100px; line-height: 100px; text-align: center; box-sizing: border-box; background-color: #57faff; border: 1px dashed red; } / 利用绝对定位,(top:50%;transform:translate(-50%,-50%)) / .content_1{
position: relative; } .box_1{
top: 50%; position: absolute; left: 50%; transform: translate(-50%,-50%); } / 利用绝对定位,(top/bottom/left/right:0;margin:auto;) / .content_2{
position: relative; } .box_2{
position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } / flex布局方法 / .content_3{
display: flex; align-items: center; / 垂直居中 / justify-content: center; / 横向居中 / } / table-cell实现水平垂直居中: table-cell middle center组合使用 / .content_4{
display: table-cell; / 只能是块状元素，否则只能垂直居中，无法水平居中 / vertical-align: middle; text-align: center; } .box_4{
display: inline-block; / 设置成块状元素 / }
style>
html> <body> <div class="main"> <div class="plan"> <div class="title"> <div>垂直居中方案一:
div> <div>绝对定位 + transform
div>
div> <div class="content content_1"> <div class="box box_1">
div>
div>
div> <div class="plan"> <div class="title"> <div>垂直居中方案二:
div> <div>绝对定位 + margin
div>
div> <div class="content content_3"> <div class="box box_3">
div>
div>
div> <div class="plan"> <div class="title"> <div>垂直居中方案三:
div> <div>flex布局方法
div>
div> <div class="content content_3"> <div class="box box_3">
div>
div>
div> <div class="plan"> <div class="title"> <div>垂直居中方案四:
div> <div>table-cell
div>
div> <div class="content content_4"> <div class="box box_4">
div>
div>
div>
div>
body> 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/225604.html原文链接：https://javaforall.net
