這是代碼：
body {
position: relative;
font-size: 30px;
}
#middle {
width: 420px;
height: 500px;
margin: 100px auto 0;
border: solid;
}
#left {
position: fixed;
border-style: solid;
border-color: red;
top: 50%;
transform: translateY(-50%);
left: 0;
}
#right {
position: fixed;
border-style: solid;
border-color: blue;
top: 50%;
transform: translateY(-50%);
right: 0;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>Centered divs</title>
</head>
<body>
<div id="left">?</div>
<div id="middle"></div>
<div id="right">?</div>
</body>
</html>應該如何CSS代碼會按順序修改為兩個div與IDSleft和right中間及各自的螢屏邊緣的DIV之間得到集中？（到目前為止，我已經成功地將 div 垂直居中并將它們放置在中央 div 的兩側，但沒有在中央 div 和螢屏邊緣的空間內水平居中。）
uj5u.com熱心網友回復：
由于中間 div 具有固定寬度，因此您可以使用一些數學運算：
body {
font-size: 30px;
}
#middle {
width: 420px;
height: 500px;
margin: 100px auto 0;
border: solid;
}
#left {
position: fixed;
border: solid red;
top: 50%;
transform: translate(-50%,-50%); /* updated this too */
left: calc((100% - 420px)/4); /* half of (half the remaining space) */
}
#right {
position: fixed;
border: solid blue;
top: 50%;
transform: translate(50%,-50%);
right: calc((100% - 420px)/4);
}
* {
box-sizing:border-box;
}<div id="left">?</div>
<div id="middle"></div>
<div id="right">?</div>uj5u.com熱心網友回復：
最好的方法是使用 flexbox
body {
font-size: 30px;
}
#container{
display:flex;
justify-content:space-between;
align-items:center;
}
#middle {
width: 420px;
height: 500px;
border: solid;
}
#left {
border-style: solid;
border-color: red;
display:inline;
}
#right {
border-style: solid;
border-color: blue;
display:inline;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>Centered divs</title>
</head>
<body>
<div id='container'>
<span id="left">?</span>
<div id="middle"></div>
<div id="right">?</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/345052.html
上一篇：具有回應的網格區域無法按預期作業