center body html code example

Example 1: html center body

body {
  display:flex; flex-direction:column; justify-content:center;
  min-height:100vh;
}

Example 2: css center text

/* To center text, you need to use text-align. */

.centerText {
  text-align: center; /* This puts the text into the center of the 
  screen. */
}

/* There are also other things that you can use in text-align:
left, right, and justify. Left and right make the test align to the
right or left of the screen, while justify makes the text align both
sides by spreading out spaces between some words and squishing others. */

Example 3: html center body

body {
max-width: max-content;
margin: auto;
}

Example 4: css centraliz page

Use a container element and set a specific max-width.
A common width many websites use is 960px.
To actually center the page, add margin: auto.
The following example will center the website on screens that are wider than
500px.On screens that are less than 500px wide,
it will span the whole of the page:

<style>
.content {
  max-width: 500px;
  margin: auto;
}
</style>
<body>

<div class="content">
  <!-- Page content -->
</div>

</body>

Example 5: how to align contents of div in center

1. Enclose the div that you want to center with a parent element 
(commonly known as a wrapper or container)

2. Set “text-align: center” to parent element.

3. Then set the inside div to “display: inline-block”

Example 6: 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;
}

Tags:

Misc Example

Recent Posts