ayoubkhan558-zz/centering div and content in html css.html

## centering div and content in html css.html
<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <style>
    body {
        background: pink;
    }

    div.container {
        height: 10em;
        position: relative;
        background: yellow;
    }

    div.container .content {
        margin: 0;
        background: gray;
        padding: 15px;
        text-transform: uppercase;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    div.container2 {
        height: 10em;
        position: relative;
        background: red;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    div.container2 .content2 {
        margin: 0;
        background: gray;
        padding: 15px;
        text-transform: uppercase;
        color: #fff;
    }

    .center {
        width: 35px;
        height: 35px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: red;
    }

    .center2 {
        width: 35px;
        height: 35px;
        display: block;
        margin: 0 auto;
        background: green;
    }

    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%)
    }
    </style>
</head>

<body>
    <h3>Centering a Div</h3>
    <small>Method 1</small>
    <div class=center></div>
    <small>Method 2</small>
    <div class=center2></div>
    <h3>Centering Content</h3>
    <small>Method 1</small>
    <div class=container>
        <div class="content">
            Text Here
        </div>
    </div>
    <small>Method 2</small>
    <div class=container2>
        <div class="content2">
            Content
        </div>
    </div>
    <h3>Centering a Viewport</h3>
    <section>
        <h1>Nicely centered</h1>
        <p>This text block is vertically centered.
            <p>Horizontally, too, if the window is wide enough.
    </section>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Page Title</title>
	<style>
	body {
	background: pink;
	}

	div.container {
	height: 10em;
	position: relative;
	background: yellow;
	}

	div.container .content {
	margin: 0;
	background: gray;
	padding: 15px;
	text-transform: uppercase;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	div.container2 {
	height: 10em;
	position: relative;
	background: red;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	div.container2 .content2 {
	margin: 0;
	background: gray;
	padding: 15px;
	text-transform: uppercase;
	color: #fff;
	}

	.center {
	width: 35px;
	height: 35px;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: red;
	}

	.center2 {
	width: 35px;
	height: 35px;
	display: block;
	margin: 0 auto;
	background: green;
	}

	section {
	background: black;
	color: white;
	border-radius: 1em;
	padding: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%)
	}
	</style>
	</head>

	<body>
	<h3>Centering a Div</h3>
	<small>Method 1</small>
	<div class=center></div>
	<small>Method 2</small>
	<div class=center2></div>
	<h3>Centering Content</h3>
	<small>Method 1</small>
	<div class=container>
	<div class="content">
	Text Here
	</div>
	</div>
	<small>Method 2</small>
	<div class=container2>
	<div class="content2">
	Content
	</div>
	</div>
	<h3>Centering a Viewport</h3>
	<section>
	<h1>Nicely centered</h1>
	<p>This text block is vertically centered.
	<p>Horizontally, too, if the window is wide enough.
	</section>
	</body>

	</html>