Dynamisches Padding in css

Question

Gegeben habe ich eine äußere und innner div, wo die Größe der äußeren div festgelegt ist (border-size) aber die Größe der inneren div ist unbekannt. Gibt es eine Möglichkeit, dem äußeren Teil eine Polsterung zu geben, so dass das innere Teil darin zentriert ist? (Mit CSS/SCSS)

<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 

.outer { 
    width: 50; 
    height: 40; 
    ... 
} 
.inner { 
    width: ? // <50 
    width: ? // <40 
} 

Answer 1

bedienbares Display: flex in äußeren div

check this out:

.outer { 
 
    width: 500px; 
 
    height: 400px; 
 
    background:yellow; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.inner { 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    Hey There I am at centre. 
 
    </div> 
 
</div>

Hoffe, es hilft :)

Answer 2

Für einfache, zuverlässige Ergebnisse möchten Sie Flex-Box verwenden . Verwenden Sie die folgenden auf Ihrem Elternelement:

display: flex 

Wenn Ihr Ziel Zentrum ein Element, vertikal und horizontal innerhalb ihrer Grundelement ist, würden Sie die folgenden Regeln auf das übergeordnete Element gelten auch:

justify-content: center; 
align-items: center; 

Warum die zwei zusätzlichen Eigenschaften?

Einer liegt auf der horizontalen Achse, der andere auf der vertikalen Achse. Standardmäßig behandelt ein Flex-Container (das übergeordnete Element) die Elemente als eine Zeile, wodurch die primäre Achse horizontal ist. Eine Reihe.

justify-content beeinflusst die primäre Achse.

align-items betrifft die sekundäre Achse.

Alles gesagt und getan, Sie verwandeln das Elternelement in einen Flex-Container und sagen ihm, Kindelemente vertikal und horizontal zu zentrieren.

Stellen Sie sicher, dass Sie alle relevanten Elemente mit Breiten und Höhen versehen, und Sie sind im Geschäft!