Css align center

Code: CSS

2021-02-12 04:54:35

//HTML
<div class="parent">
	<span>Hello World</span>
</div>

//CSS
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

11

user2800

Code: CSS

2021-02-13 08:47:20

/* this will center all children within the parent element. */
.parent {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center; /* vertical */
}

3

Leticia Wilhelm

Code: CSS

2021-08-10 09:57:27

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

1

Helen

Code: CSS

2021-01-20 06:07:06

.row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.block {
  width: 100px;
}

1

squarism

Code: CSS

2021-02-08 10:24:36

<!DOCTYPE html>
<html>
   <head>
      ...
      <style type="text/css">
         div{
         width: 200px;
         height: 200px;
         border: solid green;
         display: table-cell;
         vertical-align: middle;
         }
      </style>
   </head>
   <body>
      <div>Vertikal ausgerichteter Text</div>
   </body>
</html>

1

Henry

Code: CSS

2021-02-04 17:39:18

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

-1

Santhosh Kunder

Code: CSS

2021-02-13 08:49:21

<!-- 
	 Simple CSS CENTER DIV Example
 	 
	 * See Fiddle in link for PoC *
-->

<div class="parent">
  <div class="child">
    <p>
      Eh Up Me Duck!
    </p>
  </div>
</div>

<style>
.parent {
  /* Just for aesthetics: see fiddle */
  border: 1px solid black;
  padding: 2px;
}

.child {
  border: 1px solid red;
  width: 50%;
  
  /* This is where the magic happens */
  margin-left: auto;
  margin-right: auto;
  /**********************************/
}

p {
  /* As you do */
  text-align: center;
}
</style>

8

Katelyn Niswonger

Code: CSS

2021-02-10 22:50:18

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

1

hcnak

Code: CSS

2021-02-15 20:49:42

div.center{display:block;margin:auto;width:50%;}
p.center{text-align:center;}

3

Inda

Code: CSS

2021-03-01 02:58:17

<!--center text-->
<!--padding deals with margins within the element itself-->
<!--margin deals with blank space surrounding and element-->
<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 80%;
  border: 3px solid #73AD21;
  padding: 10px; 
  margin: 20px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

</body>
</html>

1

ParaDice

Code: CSS

2021-02-26 19:25:04

margin: auto;

0

Tags

Related

New to Communities?