佈局方式，水平垂直居中的程式碼
阿新 • • 發佈：2021-07-14
第一種方法如果沒有高度是有問題，基本不算一種方式
<div className="mxbox">
<div className="mbox1">
position:absolute<br/>
left top<br/>
right bottom 0<br/>
margin auto<br/>
</div>
</div>
<div className="mxbox">
<div className="mbox2">
position:absolute<br/>
left top 50%<br/>
asdfasdfa<br/>
margin:-一半<br/>
</div>
</div>
<div className="mxbox">
<div className="mbox3">
absolute<br/>
left:50%;<br/>
top:50%;<br/>
transform:<br/>
translate(-50%,-50%)<br/>
</div>
</div>
<div className="mxbox">
<div className="mbox4">
flex<br/>
margin:auto<br/>
asdfasdfa<br/>
asdfasdfa<br/>
</div>
</div>
<div className="mxbox mobxnnnn">
<div className="mbox5">
父
align-items:center;
justify-content:center;
子
width:120px;
background: red;
</div>
</div>
.mxbox {
width:500px;
height:500px;
border:1px solid red;
display:flex;
position: relative;
margin:0 auto;
div {
font-size:14px;
}
.mbox1{
color:#fff;
width:120px;
background: red;
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
.mbox2{
color:#fff;
width:120px;
margin:auto;
background: red;
position: absolute;
left:50%;
top:50%;
margin:0 -60px;
}
.mbox3{
color:#fff;
width:120px;
margin:auto;
background: red;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.mbox4{
color:#fff;
width:120px;
margin:auto;
background: red;
}
&.mobxnnnn{
align-items:center;
justify-content:center;
.mbox5 {
width:120px;
background: red;
}
}
}
如何製作相容不同瀏覽器圖片上下左右居中的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>如何製作相容不同瀏覽器圖片上下左右居中的效果</title>
<style type="text/css">
.l_llq {width:600px;height:320px;line-height:320px;border: 1px solid;text-align: center;}
.l_llq img {vertical-align: middle;}
.l_llq span {_height:100%;_writing-mode:tb-rl;_vertical-align:middle;}
/** .l_llq span {_height: 100%;_layout-flow:vertical-ideographic;_vertical-align:middle;} **/
</style>
</head>
<body>
<div class="l_llq">
<span><img src="http://120ping.120askimages.com/default/images/logo/logo_index.gif" alt="Logo" /></span>
</div>
<hr />
<div class="l_llq">
<span><img src="http://a.120askimages.com/images/newasklogo.gif" alt="Logo" /></span>
</div>
<hr />
<div class="l_llq">
<span><img src="http://iiyi.com/i/templets/default/iiyi_images/logo.jpg" alt="Google" /></span>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>如何製作相容不同瀏覽器圖片上下左右居中的效果</title>
<style>
html{height:100%;}
body{margin:0;height:100%;}
div{height:100%; text-align:center;border:1px solid red;}
span{display:inline-block; height:100%; vertical-align:middle;border:1px solid red;}
img{ vertical-align:middle;}
</style>
</head>
<body>
<div>
<span></span><img src="http://120ping.120askimages.com/default/images/new_index/120_01.jpg" alt="1"/>無標題文件無標題文件無標題文件
</div>
</body>
</html>