css position element in center code example
Example 1: position absolute center
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
Example 2: center with css
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Example 3: center css elements
body{
display: grid;
place-items: center;
}
Example 4: css center position
body {
text-align: center;
}
tag_name {
display: inline;
}
tag_name {
display: block;
width: 170px;
}
tag_name {
display: block;
width: 100px;
margin: 0 auto 0 auto;
}
Example 5: center element in div
<h1>Centering with CSS</h1>
<h3>Text-Align Method</h3>
<div class="blue-square-container">
<div class="blue-square"></div>
</div>
<h3>Margin Auto Method</h3>
<div class="yellow-square"></div>
<h3>Absolute Positioning Method</h3>
<div class="green-square"></div>
h1,
h3 {
text-align: center;
}
.blue-square-container {
text-align: center;
}
.blue-square {
background-color: #0074D9;
width: 100px;
height: 100px;
display: inline-block;
}