How to center all elements of an HTML page vertically?

Asked

Viewed 255 times

0

I’m making a page using bootstrap and I need the carousel stay centered with the images in the middle of the page, both horizontally (already done) and vertically, because on the mobile phone, the image appears at the top. Obs: I’ve tried using the command vertical-align: middle and unfortunately it didn’t work.

CSS

*
{
  margin: 0px;
  padding: 0px;
}

body, html
{
  height: 100%;
  background: linear-gradient(to bottom right, #00ccff , #00cc00);
}

/* MEDIA QUERY FOR IPAD LANDSCAPTE */
@media (min-width: 980px) and (max-width: 1100px) {
}

/* MEDIA QUERY FOR IPAD PORTRAIT */
@media (min-width: 768px) and (max-width: 979px) {
}

/* MEDIA QUERY FOR ALL MOBILE DEVICES : HAVING LESS THAN 767 RESOLUTION */
@media (max-width: 767px) {
}

/* MEDIA QUERY FOR EXTRA SMALL : IPHONE LANDSCAPE & PORTRAIT DEVICES */
@media (max-width: 480px) {
}

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

#myCarousel, .carousel-inner
{
  height: 100%;
}

#primeira_imagem
{
  width: 60%;
  height: auto;
  margin: auto;
  display: block
}

Page view: Página através do computador

Página através do celular

html css

  • This answers your question? How best to center an element vertically and horizontally?

  • I even managed to align everything using the method of the second comment, but now another problem has arisen. The slides of the Carousel are being born at the top and aligning in the middle when the slide exchange occurs, causing a "weird effect", there is no exchange of slides fluidly.

2 answers

1


in your case the Flexbox will help you a lot.

You can create a div to wrap your Carousel and set its size. This div will receive the following css properties:

.Wrapper{
display: flex;
Justify-content: center;
align-items:center;
}

See the example on Codepen

Research also Grid CSS

These two sets of properties: Flexbox and Grid will make you position the elements more easily.

0

Put this css in the body

display: flex; align-items: center; and Justify-content: center

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.