ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで垂直方向のセンタリングを設定するにはどうすればよいですか?
CSSで垂直方向のセンタリングを設定するにはどうすればよいですか?
- 青灯夜游オリジナル
- 2018-09-08 13:42:5431377ブラウズ
フロントエンドページを開発する際、ページを美しくするために縦方向のセンタリング効果が必要な箇所が出てきます。この章では、CSS を使用して垂直方向の中央揃えを設定する方法を学び、テキスト ボックスと div ボックスの垂直方向の中央揃えを設定するいくつかの方法を詳しく紹介します。困っている友人は参考にしていただければ幸いです。
おすすめマニュアル: CSSオンラインマニュアル
One: cssでテキストを縦方向中央揃えに設定する方法
1. line-heightによりテキストが縦方向中央揃えになります
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>レンダリング:
このようにして、div内のテキストを水平方向と垂直方向の中央に配置できます
2. CSS3 flex レイアウトはテキストを垂直方向に中央揃えにします。効果
2.divタグ：水平センタリングと垂直センタリングの実装（コード付き）
関連動画のおすすめ: 1.
2: CSSでdivボックスコンテナ(ブロック要素)を縦方向中央に設定する方法
1.絶対配置と負のマージンにより、ブロックレベルの要素が垂直方向に中央揃えになります
(既知の要素の高さ)
要素の高さがわかっている場合は、次のように垂直方向の中央揃えを実現できます:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html> 効果 画像:
この方法には優れた互換性がありますが、小さな欠点があります。中央揃えのブロックレベル要素のサイズを事前に知っておく必要があり、そうでない場合は垂直方向の中央揃えを正確に行うことができません。 2. 絶対配置と変換を使用します (要素の高さが不明)
要素の高さがわからない場合は、まず要素をコンテナの中心に配置してから、次を使用する必要があります。要素を変換するtransformのtranslate属性。 の中心が親コンテナの中心と一致するため、垂直方向のセンタリングが実現します: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中</div>
</div>
</body>
</html>Rendering:
このメソッドの非常に明白な利点は、変換時の移動には偏りがあるため、中心にある要素のサイズを事前に知る必要があります。移動のパーセンテージは要素自体のサイズに比例します。
3. マージンと組み合わせた絶対配置: auto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中</div>
</div>
</body>
</html>
レンダリング:
このメソッドは、最初に要素を親要素に対して絶対的に垂直方向の中央に配置し、上下を等しく設定する必要があります。値が設定されていても、2 つが等しい限り、要素のマージンを自動に設定して、垂直方向のセンタリングを実現します。中央揃えの要素の幅と高さは設定する必要はありませんが、設定しない場合は独自のサイズを含む画像などの要素でなければ実装できません。
4. パディングを使用して子要素の垂直方向の中央揃えを実現します<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 200px;
height: 100px;
background: orange;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中...</div>
</div>
</body>
</html>レンダリング:
这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。
5. 使用flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
.child{
width: 300px;
height: 100px;
background: #08BC67;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中了--弹性布局</div>
</div>
</body>
</html>效果图：
关于flex布局（弹性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下：
flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex;将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：
flex-start:：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：交叉轴的中点对齐；
baseline：项目第一行文字的基线对齐；
stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。
以上がCSSで垂直方向のセンタリングを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。