Centering

A box using the properties of justify-content and align-items with both set to center will align the contained item(s) in the center (x and y).

Good way to center an image and use this box to title one.

Below is the HTML to generate this page as shown above. Values assigned to margins, dimensions, borders, colors, are arbitrary.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {margin: 30px 30px;}

h1 {text-align: center;}

.workbox1 {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
margin-left: 20%; margin-right: 20%;
border: 1px solid grey;
opacity: 0.5;
}

.workbox2 {
display: flex;
justify-content: center;
align-items: center;
height: auto;
margin-left: 20%; margin-right: 20%;
border: 1px solid lightgrey;
}

</style>

</head>

<body>

<h1>Centering</h1>

<p>A box using the properties of justify-content and align-items with both set to center will align the contained item(s) in the center (x and y).</p>

<div class="workbox1">

<img src= "LagoonNewHST5.jpg" height= "380px">

</div>

<div class= "workbox2">

<p>Good way to center an image and use this box to title one.

</div>