move html width to middle code example
Example 1: css image center
.container {
position: relative;
float: right;
width: 100%;
height: 250px;
overflow: hidden;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
width: auto;
min-width: 100%;
height: 100%;
/* height: auto; */
/* min-height: 100%; */
margin-right: -50%;
transform: translate(-50%, -50%);
object-fit: contain;
-o-object-fit: contain;
}
Example 2: center element in div
/* html */
<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>
/* css */
h1,
h3 {
text-align: center;
}
.blue-square-container {
text-align: center;
}
.blue-square {
background-color: #0074D9;
width: 100px;
height: 100px;
display: inline-block;
}