Zentrieren Sie ein DIV unabhängig von der Bildschirmgröße in der Mitte der Seite

Question 1

Ich möchte den unteren div-Container so zentrieren, dass die Site unabhängig von der Bildschirmgröße in der Mitte der Seite angezeigt wird.

http://penarthpc.com/~droneboy/

Ich habe ein bisschen herumgespielt, aber anscheinend fehlt etwas.

Question 2

Die Lösung für dieses Problem ist die Verwendung auto zum margin im CSS UND etwas Breite für das DIV selbst:

div.centered {
margin-left:auto;
margin-right:auto;
width:80%;
}

Question 3

Der einfachste Weg, etwas unabhängig von der Seitenbreite zu zentrieren, ist margin: auto; in Ihrem CSS, mit definierter Höhe und Breite.

.class {
    height: 50px;
    width: 50px;
    margin: auto;
}

JSFiddle: http://jsfiddle.net/rVXBH/

Question 4

.center-div {
   width: 600px;
   height: 600px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -300px;
   margin-top: -300px;
}

Dadurch wird Ihr DIV mit der Klasse zentriert center-div horizontal UND vertikal. Das margin-left muss die negative Hälfte Ihrer Breite sein. Das margin-top muss die halbe Höhe negativ sein.

Nur horizontal zentrieren:

.center-div {
   width: 600px;
   height: 600px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

Question 5

einfach. Geben Sie einfach die Containermarge von “0 auto” an

margin: 0 auto;

Question 6

wenn Sie den Container zentrieren möchten (vertikal):

Vertikale Zentrierung mit CSS

wenn (horizontal) schau dir das an:

wie-macht-man-einfach-horizontal-einen-div

Question 7

Der folgende Code funktioniert für jede Bildschirmgröße.

div.centered {
   background-color: rgb(18, 80, 144);
   height: 100vh;
}
div.centered span {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   color: rgb(250, 255, 255);
}

<div class="centered">
	<span>Center</span>
</div>

Question 8

Hier ist eine großartige Methode, die ich verwende, sie verwendet a Vor selector, um ein unsichtbares div zu erstellen, das sich um die vertikale Ausrichtung kümmert:

HTML:

<body>
    <div id="outter-div">
        <div id="aligned">
            <h1>A Nice Title</h1>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
        </div>
    </div>
</body>

CSS:

/* This parent can be any width and height */
#outter-div {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
#outter-div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */
#aligned{
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Diese finden Sie auf dieser Beitrag die auch eine Demo auf jsbin hat!