Как вывести спиннер по середине экрана?

Question

[dfv123]

Как вывести спиннер по середине экрана?
https://codesandbox.io/s/n1rq663r54

Answer 1

[ink]

как обычно применить absolute т.е в css добавьте вот это - 93строка

.spinner{
  height:140px;
  width: 140px;
  background: url('https://discuss-assets.s3.amazonaws.com/original/3X/0/3/03ad072969fc47ab98c776a60afc76d61e4877e8.svg') no-repeat;
  background-position: 22px 30px;
  background-size: 96px 96px;
  animation: spin infinite .7s linear;
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
}

Answer 2

[Антон Спирин]

Можно так:

const wrapperStyle = {
  position: 'fixed',
  top: 0,
  bottom: 0,
  left: 0, 
  right: 0,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '100%'
};

const Preloader = () => (
  <div style={wrapperStyle}>
    <div className="spinner" />
  </div>
);